JS 兼容大全

//获取浏览器可视区宽度
function getWidth() {
    if (window.innerWidth){
        return window.innerWidth;
    }
    else{
        if (document.compatMode == "CSS1Compat"){
            return document.documentElement.clientWidth;
        }
        else{
            return document.body.clientWidth;
        }
    }
}
// 简写
// function getWidth(){
//     return window.innerWidth || document.compatMode == "CSS1Compat" ? document.documentElement.clientWidth : document.body.clientWidth;
// }

//获取浏览器可视区高度
function getHeight() {
    if (window.innerHeight){
        return window.innerHeight;
    }
    else{
        if (document.compatMode == "CSS1Compat"){
            return document.documentElement.clientHeight;
        }
        else{
            return document.body.clientHeight;
        }
    }
}
// 简写
// function getHeight(){
//     return window.innerHeight || document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
// }

//获取浏览器卷曲高度
function getscrollTop() {
    if (document.documentElement.scrollTop){
        return document.documentElement.scrollTop;
    }
    else{
        return document.body.scrollTop;
    }
}
// 简写
// function getscrollTop() {
//     return document.documentElement.scrollTop || document.body.scrollTop;
// }
// function getscrollTop() {
//     return document.documentElement.scrollTop + document.body.scrollTop;
// }

function $(id){
    return document.getElementById(id);
}

// 由于getElementsByClassName()方法有兼容性问题 （IE8以下不兼容）
// 所以利用getElementsByTagName()方法封装一个函数模拟ByClassName函数功能
// 参数： class类名
// 返回值：匹配到的所有元素节点
function getClassName(cName){
    var all = document.getElementsByTagName("*");
    var arrays = new Array();
    for(var i = 0; i < all.length; i++){
        if (all[i].className == cName){
            arrays.push(all[i])
        }
    }
    return arrays;
}

// 获取元素非行间样式的值
// 参数1：元素节点
// 参数2：属性名
function getStyle(element, attrName){
    if (element.currentStyle) {
        return element.currentStyle[attrName];
    }
    else{
        return window.getComputedStyle(element, null)[attrName];
    }
}

// 返回元素的子节点（过滤掉空白文本 以及 注释节点后的）
// 参数：元素节点
// 返回值： 元素节点的子集节点
function getChildNodes(element){
    var eList = element.childNodes;
    var arrays = new Array();
    for (var i = 0; i < eList.length; i++) {
        if (eList[i].nodeType == 1) {        //元素节点:1 属性节点:2 文本节点:3  注释节点:8
            arrays.push(eList[i])
        }
    }
    return arrays;
}

// 返回元素的第一个子节点 (过滤掉空白文本 以及 注释节点后的)
// 参数：元素节点
// 返回值： 元素节点的第一个子元素节点
function getFirstChild(element){
    var eList = element.childNodes;
    var firstChild = null;
    for (var i = 0; i < eList.length; i++) {
        if (eList[i].nodeType == 1) {
            firstChild = eList[i];
            break;
        }
    }
    return firstChild;
} 

// 返回元素的最后一个子节点 (过滤掉空白文本 以及 注释节点后的)
// 参数：元素节点
// 返回值： 元素节点的最后一个子元素节点
function getLastChild(element){
    var eList = element.childNodes;
    var lastChild = null;
    for (var i = eList.length - 1; i >= 0; i--) {
        if (eList[i].nodeType == 1) {
            lastChild = eList[i];
            break;
        }
    }
    return lastChild;
} 

// 返回元素的上一个同级节点
// 参数： 元素节点
// 返回值： 元素的上一个同级节点
function getPreviousSibling(element){
    var obj = element.previousSibling;
    while (obj != null && obj.nodeType != 1){    //循环会在指定条件为真时循环执行代码块。
        obj = obj.previousSibling;
    }
    return obj;
}

// 返回元素的下一个同级节点
// 参数： 元素节点
// 返回值： 元素的下一个同级节点
function getNextSibling(element){
    var obj = element.nextSibling;
    while (obj != null && obj.nodeType != 1){    //循环会在指定条件为真时循环执行代码块。
        obj = obj.nextSibling;
    }
    return obj;
}

// 原理：由于e.pageY和pageX这个属性在IE低版本中不支持(8及以下)，所以利用可视区鼠标的位置加上滚动条卷曲高度来获取基于内容区的鼠标的位置
// 作用：获取鼠标相对内容区的鼠标Y轴位置
// 参数：相对可视区的鼠标位置 (e.pageY)
// 返回值：相对内容区的鼠标位置
function getPageY(y){
    return y + document.documentElement.scrollTop + document.body.scrollTop;
}

// 封装dom 2级事件，添加卸载的函数
// 参数： 
// 1：操作的元素 
// 2：事件类型 (去掉on后)
// 3：执行的非匿名函数
// 4：捕获/冒泡（true/false）
// 添加事件
function addEvent(element, type, fn, method){
    if (element.addEventListener){
        element.addEventListener(type, fn, method)
    }
    else{    //IE浏览器 8 级以下
        element.attachEvent("on" + type, fn);
    }
} 
// 卸载事件
function delEvent(element, type, fn, method){
    if (removeEventListener) {
        element.removeEventListener(type, fn, method);
    }
    else{
        element.detachEvent("on" + type, fn)
    }
}

// e.target      获取拥有该事件对象的本身，等同于this  非IE浏览器使用
// e.srcElement 获取拥有该事件对象的本身，等同于this  IE浏览器使用
// e.type         获取该事件类型


// 作用： 阻止事件默认行为
// 参数：事件源对象
function myPreventDefault(eobj){
    if (eobj.preventDefault){
        eobj.preventDefault();    //IE8以上，及火狐谷歌等
    }
    else{
        eobj.returnValue = false;    //ie8及以下
    }
}

// 作用： 阻止事件冒泡
// 参数： 事件源对象
function myStopPropagation(eobj) {
    if (eobj.stopPropagation){
        eobj.stopPropagation();    //非IE 下阻止事件冒泡的方法
    }
    else{
        eobj.cancleBubble = true;    //IE8及以下浏览器阻止事件冒泡
    }
}

// 作用： 判断鼠标左右键
function getMouseDirection(e){
    e = e || event;
    //e.button === 0 IE高版本(9以上)火狐谷歌
    //e.button === 1 IE低版本 8及以下
    if (e.button === 0 || e.button === 1){    
        return "左键";
    }
    if(e.button === 2){
        return "右键";
    }
}

// 封装cookie
// 设置cookie
// 参数： 1：键名 2：键值 3.过期时间（可传可不传）
function setCookie(key, value, dateTime){
    var cValue = key + "=" + encodeURIComponent(value);    //编码（防止中文）
    if (dateTime){
        cValue += ";expires=" + dateTime;
    }
    document.cookie = cValue;
}
// 获取cookie
function getCookie(key){
    var arr = document.cookie.split("; ");
    var keyValue = "";
    for (var i = 0; i < arr.length; i++){
        var keyName = arr[i].split("=")[0];
        if (keyName === key){
            keyValue = arr[i].split("=")[1];
            break;
        }
    }
    return decodeURIComponent(keyValue);    //解码 (防治中文)
}
//删除cookie
function delCookie(key){
    document.cookie = key+"=expires=" + new Date(0); 
}

未完，待续...