dojo/dom-style样式操作学习笔记

var getComputedStyle, style = {
        // summary:
        //        This module defines the core dojo DOM style API.
    };
    // nodeType为1，代表元素节点
    if(has("webkit")){
        getComputedStyle = function(/*DomNode*/ node){
            var s;
            if(node.nodeType == 1){
                var dv = node.ownerDocument.defaultView;
                s = dv.getComputedStyle(node, null);
                // node不可见时，无法得到有效结果
                if(!s && node.style){
                    node.style.display = "";
                    s = dv.getComputedStyle(node, null);
                }
            }
            return s || {};
        };
    }else if(has("ie") && (has("ie") < 9 || has("quirks"))){
        getComputedStyle = function(node){
            return node.nodeType == 1 && node.currentStyle ? node.currentStyle : {};
        };
    }else{
        getComputedStyle = function(node){
            return node.nodeType == 1 ?
                node.ownerDocument.defaultView.getComputedStyle(node, null) : {};
        };
    }
    style.getComputedStyle = getComputedStyle;

var toPixel;
    if(!has("ie")){
        toPixel = function(element, value){
            //非ie浏览器直接转化成数字
            return parseFloat(value) || 0;
        };
    }else{
        // ie浏览器下则要进行各种兼容处理
        toPixel = function(element, avalue){
            if(!avalue){ return 0; }
            // 对于border-width 可能设置为medium，这时我们认为宽度为4
            if(avalue == "medium"){ return 4; }
            // 带px单位的，去掉px即可；slice函数参数为负数的相当于length+负数
            if(avalue.slice && avalue.slice(-2) == ‘px‘){ return parseFloat(avalue); }
            // 下面这段没看懂。。。。。
            var s = element.style, rs = element.runtimeStyle, cs = element.currentStyle,
                sLeft = s.left, rsLeft = rs.left;
            rs.left = cs.left;
            try{
                // ‘avalue‘ may be incompatible with style.left, which can cause IE to throw
                // this has been observed for border widths using "thin", "medium", "thick" constants
                // those particular constants could be trapped by a lookup
                // but perhaps there are more
                s.left = avalue;
                avalue = s.pixelLeft;
            }catch(e){
                avalue = 0;
            }
            s.left = sLeft;
            rs.left = rsLeft;
            return avalue;
        };
    }
    style.toPixelValue = toPixel;

style.get = function getStyle(/*DOMNode|String*/ node, /*String?*/ name){
        var n = dom.byId(node), l = arguments.length, op = (name == "opacity");
        // 对于opacity做兼容处理，非ie直接使用css中的opacity属性； ie8以下浏览器并不支持，这时就需要使用滤镜，所以取值时候也要特殊处理
        if(l == 2 && op){ 
            return _getOpacity(n);
        }
        // 对于float保留字的处理，非ie用的是CSSFloat而ie使用的是styleFloat
        name = _floatAliases[name] ? "cssFloat" in n.style ? "cssFloat" : "styleFloat" : name;
        var s = style.getComputedStyle(n);
        // 如果指定的属性名称，调用_toStyleValue方法。
        return (l == 1) ? s : _toStyleValue(n, name, s[name] || n.style[name]); /* CSS2Properties||String||Number */
    };

var _pixelNamesCache = {
        left: true, top: true
    };
    // 如果获取的属性符合这个正则表达式，将他们放到_pixelNamesCache中，将得到的结果转化成数字
    var _pixelRegExp = /margin|padding|width|height|max|min|offset/; // |border
    function _toStyleValue(node, type, value){
        //TODO: should we really be doing string case conversion here? Should we cache it? Need to profile!
        type = type.toLowerCase();
        if(has("ie") || has("trident")){
            //ie浏览器中如果width或height得到的是auto，使用offsetWidth或者offsetHeight
            if(value == "auto"){
                if(type == "height"){ return node.offsetHeight; }
                if(type == "width"){ return node.offsetWidth; }
            }
            // 对fontWeight的处理
            if(type == "fontweight"){
                switch(value){
                    case 700: return "bold";
                    case 400:
                    default: return "normal";
                }
            }
        }
        //如果符合正则，则放入_pixelNamesCache中，将得到的结果转化成数字
        if(!(type in _pixelNamesCache)){
            _pixelNamesCache[type] = _pixelRegExp.test(type);
        }
        return _pixelNamesCache[type] ? toPixel(node, value) : value;
    }

style.set = function setStyle(/*DOMNode|String*/ node, /*String|Object*/ name, /*String?*/ value){
        var n = dom.byId(node), l = arguments.length, op = (name == "opacity");
        // 对float属性的处理
        name = _floatAliases[name] ? "cssFloat" in n.style ? "cssFloat" : "styleFloat" : name;
        // 处理opacity属性
        if(l == 3){
            return op ? _setOpacity(n, value) : n.style[name] = value; // Number
        }
        // 如果一次设置多个属性，将他们分别处理；
        for(var x in name){
            style.set(node, x, name[x]);
        }
        // 返回样式的计算值
        return style.getComputedStyle(n);
    };