前端常用兼容性写法

学习前端也有一段时间了，现尝试将我学到的兼容性写法整理一下，与大家分享。
部分兼容性写法可能有多种，以a/b/c的形式记录，一般以a为建议用法即可。

为什么要有兼容性写法

兼容性写法的出现，主要是因为不同浏览器对标签、属性、方法的支持程度存在差异(一般主要是兼容IE6、7、8)，那么如果想让不同浏览器上能取到比较一致的效果，避免报错，就要用到兼容性写法。

JavaScript兼容性写法

获取CSS当前属性值

function getStyle(ele,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(ele,null)[attr];
    }
    return ele.currentStyle[attr];
}

event的兼容性写法

function(event){
    event = event || window.event;
}

返回触发当前事件的源对象

ps:要先用以上写法(event的兼容性写法)传入event。
a、

function(event){
    event = event || window.event;
    var target = event.target || event.srcElement;
}

b、

function(event){
    event = event || window.event;
    var target = event.target?event.target:event.srcElement;
}

阻止冒泡

ps:要先用以上写法(event的兼容性写法)传入event。

if(event && event.stopPropagation){
    event.stopPropagation();
}else{
    event.cancelBubble = true;
}

元素被卷去的像素距离-scrollTop&scrollLeft

var x =window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft;
var y = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;

屏幕可视区域的宽高-clientWidth&clientHeight

ps:该属性值会被四舍五入为一个整数。

function client(){
    if(window.innerHeight !== undefined){
        return {
            "width": window.innerWidth,
            "height": window.innerHeight
        }
    }else if(document.compatMode === "CSS1Compat"){
        return {
            "width": document.documentElement.clientWidth,
            "height": document.documentElement.clientHeight
        }
    }else{
        return {
            "width": document.body.clientWidth,
            "height": document.body.clientHeight
        }
    }
}

获取鼠标位置-event.pageX&event.pageY

var pagex = event.pageX || scroll().left + event.clientX;
var pagey = event.pageY || scroll().top + event.clientY;

禁止文本被选中

ps:实质是选中后取消选中，此句不需赋值，判断有对应方法，直接执行方法。

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

获取第一个子元素

var firstNode = ele.firstElementChild || ele.firstChild;

获取最后一个子元素

var lastNode = ele.lastElementChild || ele.lastChild;

获取下一个兄弟节点

var nextNode = ele.nextElementSibling || ele.nextSibling;

获取上一个兄弟节点

var prevNode = ele.previousElementSibling || ele.previousSibling;

获取指定索引兄弟节点

ps:index表示从0开始的索引。

var node = ele.parentNode.children[index];

获取元素的所有兄弟节点（不包括自身）

function getAllSiblings(ele){
    //定义一个新数组，装所有的兄弟元素，将来返回
    var newArr = [];
    var arr = ele.parentNode.children;
    for(var i=0;i<arr.length;i++){
        //判断，如果不是传递过来的元素本身，那么添加到新数组中。
        if(arr[i]!==ele){
            newArr.push(arr[i]);
        }
    }
    return newArr;
}

CSS3兼容性写法-私有前缀

当前CSS3某些样式的浏览器支持程度较差，需要添加私有前缀。
各内核对应私有前缀如下：
-webkit-: 谷歌 苹果
-moz-:火狐
-ms-：ie
-o-：欧朋
写法：一般在存在兼容性问题的样式前分别加上以上前缀，最后再写上不加前缀的样式即可。
例子：

            background:-webkit-linear-gradient(left,red,blue);
            background:-moz-linear-gradient(left,red,blue);
            background:-ms-linear-gradient(left,red,blue);
            background:-o-linear-gradient(left,red,blue);
            background:linear-gradient(left,red,blue);

建议：如果加上私有前缀还是无法解决兼容性问题，证明浏览器对其的支持太差，建议不用使用该样式。

html5的优雅降级

所谓优雅降级，其实就是html5以后，其新增标签不再兼容旧的浏览器，为了让旧的浏览器能尽可能显示html5编写的网页，使用JavaScript在旧的浏览器上模拟还原其网页效果。也就是html5的一种兼容性写法。
ps:ie8以下的浏览器不支持h5标签,这里使用条件注释，当浏览器是IE8及以下时，通过引入html5shiv.js文件解决兼容性问题
以下是html5shiv.js的共享链接：
链接：http://pan.baidu.com/s/1eSKShpw 密码：e5hq

    <!--[if lte ie 8]>
        <script src="html5shiv.min.js"></script>
    <![endif]-->