JavaScript兼容性代码

checkSheet

浏览器对很多方法的支持存在差异，所以在使用这些方法的时候应该尽可能的进行客户端检测或者进行函数封装。

• matchesSelector()

function matchesSelector(element, selector){
    if(element.matchesSelector){
        return element.matchesSelector(selector);
    }else if(element.msMatchesSelector){
        return element.msMatchesSelector(selector);
    }else if(element.mozMatchesSelector){
        return element.mozMatchesSelector(selector);
    }else if(element.webkitMatchesSelector){
        return element.webkitMatchesSelector(selector);
    }else{
        trow new Error("Not supported.");
    }
}
if(matchesSelector(document.body,"body.page1")){
    //执行操作
}

• 跨浏览器遍历某元素的所有子元素(不使用firstChild和lastChild)

var i,len,child = element.firstElementChild;
while(child != element.lastElementChild){
    processChild(child);//已知是元素
    child = child.nextElementSibling;
}

• 利用classList属性对类名进行操作从而避免手动进行繁杂的对类名这个字符串的操作

<div class="bd user disabled"></div>
<script type="text/javascript">
//删除disabled类
div.classList.remove("disabled");
//添加current类
div.classList.add("current");
//切换user类
div.classList.toggle("user");
//确定元素中是否包含既定类名
if(div.classList.contains("bd") && !div.classList.contains("disabled")){
    //执行操作...
}
</script>

• 对专有扩展contains()方法进行封装

function contains(refNode,otherNode){
    //能力检测
    if(typeof refNode.contains == "function" && (!client.engine.webkit || client.engine.webkit >= 522)){
        return refNode.contains(otherNode);
    }else if(refNode.compareDocumentPosition == "function"){
        return !!(refNode.compareDocumentPosition(otherNode) & 16)
    }else{
        var node = otherNode.parentNode;
        do{
            if(node === refNode){
                return true;
            }else{
                node = node.parentNode;
            }
        }while(node != null);
        return false;
    }
}

• 将NodeList转换成数组

function converToArray(nodes){
    var array = null;
    try{
        //针对非IE浏览器
        array = Array.prototype.slice.call(nodes,0);
    }catch(ex){
        array = new Array();
        for(var i=0,len=nodes.length;i < len;i++){
            array.push(nodes[i]);
        }
    }
    return array;
}

• 动态样式

function loadStyleString(css){
    var style = document.createElement("style");
    style.type = "text/css";
    try{
        style.appendChild(document.createTextNode(css));
    }catch(ex){
        styke.styleSheet.cssText = css;
    }
    var head = document.getElementByTagName("head")[0];
    head.appendChild(style);
}
//调用
//loadStyleString("body{background-color:red}");

• 准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top

//标准兼容模式关闭
if(document.compatMode == \"BackCompt\"){
    cWidth = document.body.clientWidth;
    cHeight = document.body.clientHeight;
    sWidth = document.body.scrollWidth;
    sHeight = document.body.scrollHeight;
    sLeft = document.body.scrollLeft;
    sTop = document.body.scrollTop;
}else{//开启CSS1Compt
    cWidth = document.documentElement.clientWidth;
    cHeight = document.documentElement.clientHeight;
    sWidth = document.documentElement.scrollWidth;
    sHeight = document.documentElement.scrollHeight;
    sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
    sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
}
/*简化版*/
var pageWidth=window.innerWidth,
pageHeight=window.innerHeight;
//IE不支持window.innerWidth，所以浏览器为IE时变量类型不为number
if(typeof pageWidth!='number'){
    //标准兼容模式开启
    if(document.compatMode=='CSS1Compat'){
    pageWidth=document.documentElement.clientWidth;
    pageHeight=document.documentElement.clientHeight;
    }
    else{
    //标准兼容模式关闭的情况
    pageWidth=document.body.clientWidth;
    pageHeight=document.body.clientHeight;
}