常用的兼容浏览器的函数封装

/*
    * ev:具体元素
    * styleName:获取元素的属性名
    * */
    function getStyle(ev,styleName) {
        if(ev.style[styleName]){
            return ev.style[styleName];
        }else if(ev.currentStyle){
            //如果是IE浏览器,则使用私有方法读取当前值
            return ev.currentStyle[styleName];
        }
        //支持Dom标准浏览器,则利用Dom定义的方法读取当前值
        else if(document.defaultView && document.defaultView.getComputedStyle){
            styleName = styleName.replace(/([A-Z])/g,"-$1");
            styleName = styleName.toLowerCase();
            var s = document.defaultView.getComputedStyle(ev,null);
            if(s){
                return s.getPropertyValue(styleName);
            }
        }else{
            //不支持返回null
            return null;
        }
    }


    var ev = document.getElementsByClassName("red")[0];
    console.log("ev:",getStyle(ev,"width"));

    /*

    * ev: 元素
    * val: 当前元素的值
    * wh: "width","height"
    * p:小数值
    * 获取宽高值
    * */
    function getSize(ev,val,wh,p) {
        var p = arguments[3];
        if(!p){
            p = 1;
        }
        if(/px/.test(val) && parseInt(val) ){
            return parseInt(parseInt(val)*p);
        }else if(val.indexOf('%')>-1 && parseInt(val)){
            var b = parseInt(val) /100;
            if((p!==1) && p){
                b *= p;
            }
            ev = ev.parentNode;
            if(ev.tagName === "BODY"){
                throw new Error("整个文档都没有固定尺寸，无法计算")
            }
            val = getStyle(ev,wh);
            return arguments.callee(ev,val,wh,b);
        }else if(/auto/.test(val)){
            var b = 1;
            if((p!==1) && p){
                b*=p;
            }
            ev = ev.parentNode;
            if(ev.tagName === "BODY"){
                throw new Error("整个文档都没有固定尺寸，无法计算")
            }
            val = getStyle(ev,wh);
            return arguments.callee(ev,val,wh,b);
        }
        else{
            throw new Error("元素或其父元素的尺寸定义了特殊单位");
        }
    }


    //求display=none的宽高
    function setStyle(ev,styles) {
        var temp = {};
        for(var key in styles){
            temp[key] = ev.style[key];
            ev.style[key] = styles[key];
        }
        return temp;
    }

    function resetStyle(ev,styles) {
        for(var key in styles){
            ev.style[key] = styles[key];
        }

    }

    /*
    * 不管元素是否被隐藏,获取元素的宽度和高度
    * */
    function getWidth(ev) {
        if(getStyle(ev,"display") !== "none"){
            return ev.offsetWidth || getAuto(ev,getStyle(ev,"width"),"width");
        }
        var tempSet = setStyle(ev,{
            display:""

        });
        var width = ev.offsetWidth || getAuto(ev,getStyle(ev,"width"),"width");
        resetStyle(ev,tempSet);
        return width;
    }
    function getHeight(ev) {
        if(getStyle(ev,"display") !== "none"){
            return ev.offsetHeight || getAuto(ev,getStyle(ev,"height"),"height");
        }
        var tempSet = setStyle(ev,{
            display:""

        });
        var height = ev.offsetHeight || getAuto(ev,getStyle(ev,"height"),"height");
        resetStyle(ev,tempSet);
        return height;
    }

    /*
    * 获取指定元素距离窗口左上角偏移坐标
    * 不要为包含的元素定义边框
    * */

    function getNodeFix(e) {
        var x = y = 0 ;
        while (e.offsetParent){
            x += e.offsetLeft;
            y += e.offsetTop;
            e = e.offsetParent;
        }
        //遍历到body元素后停止循环
        return {
            x:x,
            y:y
        };
    }


    //获取相对父元素的位置
    function getParent(e) {
        //判断offsetParent属性是否指向父元素
        if(e.parentNode === e.offsetParent){
            var x = e.offsetLeft;
            var y = e.offsetTop;

        }else{
            //调用getWidth()扩展函数获取当前元素和父元素的x坐标，并返回差值
            var  nodeFix= getNodeFix(e);
            var parentFix = getNodeFix(e.parentNode);
            var x = nodeFix.x - parentFix.x;
            var y = nodeFix.y - parentFix.y;
        }
        return {
            x:x,
            y:y
        };
    }


    //获取元素的相对包含块的位置
    function getRelative(e) {
        return {
            x:(parseInt(getStyle(e,"left")) || 0),
            y:(parseInt(getStyle(e,"right")) || 0)
        };
    }


    /*
    * 设置元素位置
    * 相对于定位元素为参照对象定位元素的位置
    *
    * */

    function setPosition(ev,styleObj) {
        (ev.style.position) || (ev.style.position = "absolute");
        ev.style.left = styleObj.left+"px";
        ev.style.top = styleObj.top+"px";
        ev.style.right = styleObj.right+"px";
        ev.style.bottom = styleObj.bottom+"px";
    }




    //获取元素的在页面坐标
    function getPoint(event) {
        var posx = 0,posY = 0;
        var event = event || window.event;
        if(event.pageX || event.pageY){
            posx = event.pageX;
            posY = event.pageY;
        }else if(event.clientX || event.clientY){
            posx = event.clientX+document.documentElement.scrollLeft+document.body.scrollLeft;
            posY = event.clientY+document.documentElement.scrollTop+document.body.scrollTop;
        }
        return {
            x:posx,
            y:posY
        };
    }


    //获取鼠标指针在页面的位置
    /*
    * pageX和pageY事件属性不被IE浏览器支持
    * clientX和clientY事件属性不被Safari浏览器支持
    * */
    function mousePoint(ev) {
        var ev = ev || window.event;
        return {
            x:ev.pageX || ev.clientX+(document.documentElement.scrollLeft || document.body.scrollLeft),
            y:ev.pageY || ev.clientY+(document.documentElement.scrollTop || document.body.scrollTop)
        }
    }


    /*
    *
    *   获取鼠标指针在元素内的位置：
    *   ev 表示事件，
    *   node 表示当前元素
    * */
    function getWithinFix(ev,e) {
        var ev = ev || window.event;
        var borderLeft = parseInt(getStyle(e,"borderLeftWidth")) || ((e.style.borderLeftStyle && e.style.borderLeftStyle !== "none")? 3:0);
        var borderTop =  parseInt(getStyle(e,"borderTopWidth")) || ((e.style.borderTopStyle && e.style.borderTopStyle !== "none")? 3:0);
        //一般浏览器获得鼠标偏移值
        var x = ev.offsetX || (ev.layerX - e.offsetLeft - borderLeft);
        //兼容Mozilla类型浏览器，减去边框宽度
        var y = ev.offsetY || (ev.layerY - e.offsetTop - borderTop);
        //获取浏览器的用户数据
        var userAgent = navigator.userAgent;
        if(
            (userAgent.indexOf("KHTML")>-1) ||
            (userAgent.indexOf("Konqueror")>-1) ||
            (userAgent.indexOf("AppleWebKit")>-1)
        ){
            //如果是Safari浏览器，则减去边框的影响
            x -=borderLeft;
            y -=borderTop;

        }
        //返回兼容不同浏览器的鼠标位置坐标，以元素边框内壁左上角为定位原点
        return {
            x:x,
            y:y
        };
    }


    /*
    * 获取页面滚动条的位置
    *
    * */

    function getScrollPoint() {
        //获取页面引用指针
        var h = document.documentElementl;
        var x = self.pageXOffset || (h && h.scrollLeft) || document.body.scrollLeft;
        var y = self.pageYOffset || (h && h.scrollTop) || document.body.scrollTop;
        return {
            x:x,
            y:y
        }
    }


    /*
    * 设置页面滚动条的位置
    *
    * */

    function setScrollPiont(ev) {
        window.scrollTo(getNodeFix(ev).x,getNodeFix(ev).y)
    }
    /*
    * 设置原度的显示和隐藏
    * ev 显示或隐藏的元素
    * isShow: false 隐藏元素,true 显示 ,省略,则根据ev显示状态
    * */

    function display(ev,isShow) {
        if(isShow && (typeof isShow!="boolean")){
            throw  new Error("第二个参数应是布尔值!");
        }
        var status = getStyle(ev,"display");
        (status!="none") && (ev._display = status);
        ev._display=ev._display || "";
        if(isShow || (status=="none")){
            ev.style.display=ev._display;
        }else{
            ev.style.display = "none";
        }
    }

    /*
    * 设置元素透明度
    * num 在1-100之间
    * */

    function setOpacity(ev,num) {
        var num = parseFloat(num);
        if(num && (num>100) || !num){
            num = 100;
        };
        if(num && (num<0)){
            num = 0;
        }
        //兼容ie浏览器
        if(ev.filters){
            ev.style.filter = "alpha(opacity="+num+")";
        }else{
            ev.style.opacity = num/100;
        }
    }

    /*
    * 获取元素的透明度
    * */

    function getOpacity(ev) {
        var r;
        if(!ev.filters){
            if(ev.style.opacity){
                return parseFloat(ev.style.opacity)*100;
            }
        }
        try{
            return ev.filters.item('alpha').opacity;
        }
        catch(ex){
            return 100;
        }
    }

 //阻止默认事件
    preventDefault(e) {
        e = e || window.event;
        if (e.preventDefault) {
            e.preventDefault();
        } else {
            e.returnValue = false;
        }
    }

//判断是否有class
function hasClass(el, cls) {
    if (!el || !cls) return false;
    if (cls.indexOf(' ') !== -1) throw new Error('className should not contain space.');
    if (el.classList) {
        return el.classList.contains(cls);
    } else {
        return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
    }
}
//添加class

function addClass(el, cls) {
    if (!el) return;
    let curClass = el.className;
    const classes = (cls || '').split(' ');

    for (let i = 0, j = classes.length; i < j; i++) {
        const clsName = classes[i];
        if (!clsName) continue;

        if (el.classList) {
            el.classList.add(clsName);
        } else {
            if (!hasClass(el, clsName)) {
                curClass += ' ' + clsName;
            }
        }
    }
    if (!el.classList) {
        el.className = curClass;
    }
}


//删除class
function removeClass(el, cls) {
    if (!el || !cls) return;
    const classes = cls.split(' ');
    let curClass = ' ' + el.className + ' ';

    for (let i = 0, j = classes.length; i < j; i++) {
        const clsName = classes[i];
        if (!clsName) continue;

        if (el.classList) {
            el.classList.remove(clsName);
        } else {
            if (hasClass(el, clsName)) {
                curClass = curClass.replace(' ' + clsName + ' ', ' ');
            }
        }
    }
    if (!el.classList) {
        el.className = trim(curClass);
    }
}
 //类型判断
function typeOf(obj) {
    const toString = Object.prototype.toString;
    const map = {
        '[object Boolean]'  : 'boolean',
        '[object Number]'   : 'number',
        '[object String]'   : 'string',
        '[object Function]' : 'function',
        '[object Array]'    : 'array',
        '[object Date]'     : 'date',
        '[object RegExp]'   : 'regExp',
        '[object Undefined]': 'undefined',
        '[object Null]'     : 'null',
        '[object Object]'   : 'object'
    };
    return map[toString.call(obj)];
};
//深度clone
function cloneObj(obj) {
    var objType = Object.prototype.toString.call(obj);
    var newObj;
    if (objType === '[object Array]') {
        newObj = [];
        for (var i = 0; i < obj.length; i++) {
            newObj.push(cloneObj(obj[i]));
        }
    } else if (objType === '[object Object]') {
        newObj = {};
        for (var j in obj) {
            newObj[j] = cloneObj(obj[j]);
        }
    } else {
        return obj;
    }
    return newObj;
}



//判断是否是数组
function isArr(arr) {
    return Array.isArray ? Array.isArray(arr) : Object.prototype.toString
        .call(arr) === '[object Array]';
};
//是否是对象
function isObject(obj) {
    return Object.prototype.toString.call(obj) ==='[object Object]' ? true : false;
}