小练习9：封装方法

• 本次练习主要将练习6，7，8中的三种方法封装到一个utils方法中，并通过css()方法对参数进行判断来确定调用那个方法，代码如下

var utils = (function () {
    function getCss(ele, attr) {
        var res = null;
        if (window.getComputedStyle) {
            res = window.getComputedStyle(ele, null)[attr];
        } else {
            res = ele.currentStyle[attr];
        }
        var reg = /^[+-]?(\d|[1-9]\d+)(\.\d+)?(px|em|pt)?$/;
        return reg.test(res) ? parseFloat(res) : res;
    }

    function setCss(ele, attr, value) {
        if (attr === 'opacity') {
            ele.style.opacity = value;
            ele.style.filter = "alpha(opacity = " + value * 100 + ")";
            return;
        }
        var reg = /^(width|height|(padding|margin)?(left|right|top|bottom)?)$/i;
        //value 进行单位处理
        if (reg.test(attr)) {
            if (!isNaN(value)) {
                value += 'px';
            }
        }
        ele.style[attr] = value;
    }

    function setGroup(ele, obj) {
        //1.检测obj是否是一个对象
        if (Object.prototype.toString.call(obj) !== "[object Object]") return;
        //2.分别给obj中每个css属性设置值
        for (var key in obj) {
            if (obj.hasOwnProperty(key)) {//私有属性
                setCss(ele, key, obj[key]);
            }
        }
    }

    function css() {
        //根据参数的类型和个数分别调用不同的方法
        var fn = getCss;//先设置默认调用的方法
        var arg = arguments;
        if (arg.length === 3) fn = setCss;
        if (arg.length === 2 && Object.prototype.toString.call(arg[1]) === "[object Object]") fn = setGroup;
        return fn.apply(null, arg);
    }

    function win(attr,value) { //获取文档的13个属性
        if(typeof value === "undefined"){
            return document.documentElement[attr] || document.body[attr];
        }
        document.documentElement[attr] = value;
        document.body[attr] = value;
    }
    return {
        css: css,
        win:win
    }
})();