【前端学习笔记】JavaScript 常用方法兼容性封装

获取样式函数封装

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

getClass()封装

function getClass(element, names){
        //如果存在getElementsByClassName()方法，则直接获取元素。
        if(document.getElementsByClassName){
                return element.getElementsByClassName(names);
        }
        var list = [];
        //获取所在元素区域内所有子元素
        var doms = element.getElementsByTagName('*');
        //处理传入的类名参数
        var namesList = myTrim(names);
        var namesArr = namesList.split(' ');

        for(var i = 0; i < doms.length; i++){
                var flag = true;
                //处理子元素类名
                var str = myTrim(doms[i].className);
                var arr = str.split(' ');
                for(var j = 0; j < namesArr.length; j++){
                        //如果存在一个传入的类名参数的值在子元素类名中不存在，则标志位变为false。
                        if(arr.indexOf(namesArr[j]) == -1){
                                flag = false;
                        }
                }
                //若标志位始终为true，则把该子元素加入到数组中；
                if(flag){
                        list.push(doms[i]);
                }
        }
        return list;
};

//去除字符串两侧的空格，且把当中的多个空格合并成一个。
function myTrim(str){
        var str1 = str.replace(/(^\s*)/g,'');
        var str2 = str1.replace(/(\s*$)/g,'');
        var str3 = str2.replace(/(\s+)/g,' ');
        return str3;
};

仿jQuery $()获取元素

//仿jQuery $()获取元素
function $(str){
        var s = str.charAt(0);
        var ss = str.substr(1);
        switch(s) {
                case '#':
                        return document.getElementById(ss);
                        break;
                case '.':
                        return getClass(document,ss);
                        break;
                default:
                    return document.getElementsByTagName(str);
        }
}

获取屏幕宽度兼容封装

function window_width(){
        if(window.innerWidth != null){
                return window.innerWidth;
        }
        else if(document.compatMode === 'CSS1Compat'){
                return document.documentElement.clientWidth;
        }
        return document.body.clientWidth;
}