mass Framework css模块

这里实际包含两个文件，在IE9中，它完全支持W3C那种精确获取样式的API，因此无需使用currentStyle与runtimeStyle，因此对于旧式IE的兼容单独放到一个JS文件中。

css.js

//=========================================
// 样式操作模块 by 司徒正美 2011.8.23
//=========================================
(function(global,DOC){
    var dom = global[DOC.URL.replace(/(#.+|\W)/g,'')],
    deps = global.getComputedStyle ?  "node" : "node,css_ie" ;
    dom.define("css", deps, function(){
        dom.log("已加载css模块")
        var cssFloat = dom.support.cssFloat ? 'cssFloat': 'styleFloat',rcap = /-([a-z])/g,capfn = function($0,$1){
            return $1.toUpperCase();
        },
        adapter = dom.cssAdapter = dom.cssAdapter || {};
        function cssCache(name){
            return cssCache[name] || (cssCache[name] = name == 'float' ? cssFloat : name.replace(rcap, capfn));
        }
        dom.mix(dom, {
            //http://www.cnblogs.com/rubylouvre/archive/2011/03/28/1998223.html
             cssName : function (name){
                var prefixes = ['', '-ms-','-moz-', '-webkit-', '-khtml-', '-o-','ms-']
                dom.cssName = function(name, target, test){
                    target = target || document.documentElement.style;
                    for (var i=0, l=prefixes.length; i < l; i++) {
                        test = (prefixes[i] + name).replace(rcap,capfn);
                        if(test in target){
                            return test;
                        }
                    }
                    return null;
                }
                return dom.cssName(name);
            },
            cssCache: cssCache,
            cssNumber : dom.oneObject("fontSizeAdjust,fontWeight,lineHeight,opacity,orphans,widows,zIndex,zoom"),
            css: function(nodes, name, value){
                var  props = {}, fn
                if(nodes.nodeType == 1){
                    nodes = [nodes]
                }
                if ( value === void 0 ) {//获取样式
                    try{
                        return (adapter[name+":get"] || adapter["_default:get"])( nodes[0], cssCache(name) );
                    }catch(e){
                        dom.log(e)
                    }
                }else {//设置样式
                    if(typeof name == "string"){
                        props[name] = value;
                    }else{
                        props = name;
                    }
                    for(name in props){
                        value = props[name];
                        name = cssCache(name);
                        fn = adapter[name+":set"] || adapter["_default:set"];
                        if ( isFinite( value ) && !dom.cssNumber[ name ] ) {
                            value += "px";
                        }
                        for(var i = 0, node; node = nodes[i++];){
                            if(node && node.nodeType === 1){
                                fn(node, name, value );
                            }
                        }
                    }
                }
                return nodes;
            }
        });

        dom.fn.css = function(name,value){
            return dom.css(this, name,value);
        }
        //=========================　处理　width height　=========================
        var cssShow = {
            position: "absolute",
            visibility: "hidden",
            display: "block"
        }
        var cssPair = {
            width:['Left', 'Right'],
            height:['Top', 'Bottom']
        }
        function swap( node, options, callback ) {
            var old = {};
            for ( var name in options ) {
                old[ name ] = node.style[ name ];
                node.style[ name ] = options[ name ];
            }
            callback.call( node );
            for ( name in options ) {
                node.style[ name ] = old[ name ];
            }
        }
        // clientWidth         = node.style.width + padding
        // https://developer.mozilla.org/en/DOM/element.clientWidth
        // offsetWidth           = node.style.width + padding + border
        // https://developer.mozilla.org/en/DOM/element.offsetWidth
        // getBoundingClientRect = node.style.width + padding + border
        // https://developer.mozilla.org/en/DOM/element.getBoundingClientRect
        //   [CSS2.1 盒子模型] http://www.w3.org/TR/CSS2/box.html
        //       B-------border----------+ -> border
        //       |                       |
        //       |  P----padding----+    | -> padding
        //       |  |               |    |
        //       |  |  C-content-+  |    | -> content
        //       |  |  |         |  |    |
        //       |  |  |         |  |    |
        //       |  |  +---------+  |    |
        //       |  |               |    |
        //       |  +---------------+    |
        //       |                       |
        //       +-----------------------+
        //       B = event.offsetX/Y in WebKit
        //           event.layerX/Y  in Gecko
        //       P = event.offsetX/Y in IE6 ~ IE8
        //       C = event.offsetX/Y in Opera
        function getWH( node, name ) {
            var which =  cssPair[name], getter = dom.cssAdapter["_default:get"],
            val = name === "width" ? node.offsetWidth : node.offsetHeight;
            which.forEach(function(direction){
                val -= parseFloat(getter(node, 'padding' + direction)) || 0;
                val -= parseFloat(getter(node, 'border' + direction + 'Width')) || 0;
            });
            return val;
        }
        "width,height".replace(dom.rword,function(name){
            dom.cssAdapter[ name+":get" ] = function(node, name, value){
                if ( node.offsetWidth !== 0 ) {
                    value = getWH( node, name ) ;
                } else {
                    swap( node, cssShow, function() {
                        value = getWH( node, name );
                    });
                }
                return value + "px"
            }
        });
        //IE9 FF等支持getComputedStyle
        dom.mix(adapter, {
            "_default:get" :function( node, name){
                return node.style[ name ];
            },
            "_default:set" :function( node, name, value){
                return node.style[ name ] = value;
            }
        },false);

        if ( DOC.defaultView && DOC.defaultView.getComputedStyle ) {
            adapter[ "_default:get" ] = function( node, name ) {
                var ret, defaultView, computedStyle;
                if ( !(defaultView = node.ownerDocument.defaultView) ) {
                    return undefined;
                }
                var underscored = name == "cssFloat" ? "float" : name.replace( /([A-Z]|^ms)/g, "-$1" ).toLowerCase();
                if ( (computedStyle = defaultView.getComputedStyle( node, null )) ) {
                    ret = computedStyle.getPropertyValue( underscored )
                    ret = ret.replace(/\d*(?:\.\d+px)/,function(a){
                        return parseFloat(a).toFixed()+"px"
                    });
                    if ( ret === "" && !dom.contains( node.ownerDocument, node ) ) {
                        ret = node.style[name];//如果还没有加入DOM树，则取内联样式
                    }
                }
                return ret;
            };
        }
        //=========================　处理　user-select　=========================
        //https://developer.mozilla.org/en/CSS/-moz-user-select
        //http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select
        //具体支持情况可见下面网址
        //http://help.dottoro.com/lcrlukea.php
        adapter[ "userSelect:set" ] = function( node, name, value ) {
            name = dom.cssName(name);
            if(typeof name === "string"){
                return node.style[name] = value
            }
            var allow = /none/.test(value||"all");
            node.unselectable  = allow ? "" : "on";
            node.onselectstart = allow ? "" : function(){
                return false;
            };
        };

        //http://msdn.microsoft.com/en-us/library/cc304082(v=vs.85).aspx
        var test = dom('<div style="background-position: 3px 5px">');
        dom.support.backgroundPosition   = test.css('backgroundPosition')  === "3px 5px" ? true : false;
        dom.support.backgroundPositionXY = test.css('backgroundPositionX') === "3px" ? true : false;
        test = null;
        //如果像IE67那样,只支持backgroundPositionXY,不支持backgroundPosition
        var XY = ["X","Y"],prefix = "backgroundPosition";
        if (!dom.support.backgroundPosition && dom.support.backgroundPositionXY) {
            adapter[prefix+":get"] = function( node, name) {
                return XY.map(function(which){
                    return adapter[ "_default:get" ](node,prefix+which)
                }).join(" ");
            }
            adapter[prefix+":set"] =function(node, name, value){
                XY.forEach(function(which,i){
                    node.style[ prefix +which ] = value.split(/\s/)[i]
                })
            }
        }
        function parseBgPos(bgPos) {
            var parts  = bgPos.split(/\s/),
            values = {
                "X": parts[0],
                "Y": parts[1]
            };
            return values;
        }
        if (dom.support.backgroundPosition && !dom.support.backgroundPositionXY) {
            XY.forEach(function(which){
                adapter[prefix+which+":get"] = function(node,name){
                    var values = parseBgPos( adapter[ "_default:get" ](node,prefix) );
                    return values[ which];
                }
                adapter[prefix+which+":set"] = function(node,name,value){
                    var values = parseBgPos( adapter[ "_default:get" ](node,prefix) ),
                    isX = which === "X";
                    node.style.backgroundPosition = (isX ? value : values[ "X" ]) + " " +
                    (isX ? values[ "Y" ] : value);
                }
            })
        }


    });

})(this,this.document);

css_ie.js

(function(global,DOC){
    var dom = global[DOC.URL.replace(/(#.+|\W)/g,'')];
    dom.define("css_ie", function(){
        dom.log("已加载css_ie模块")
        var adapter = dom.cssAdapter = {};
        //=========================　处理　opacity　=========================
        var  ropacity = /opacity=([^)]*)/i,  ralpha = /alpha\([^)]*\)/i,
        rnumpx = /^-?\d+(?:px)?$/i, rnum = /^-?\d/;
        adapter["opacity:get"] = function(node,op){
            //这是最快的获取IE透明值的方式，不需要动用正则了！
            if(node.filters.alpha){
                op = node.filters.alpha.opacity;
            }else if(node.filters["DXImageTransform.Microsoft.Alpha"]){
                op = node.filters["DXImageTransform.Microsoft.Alpha"].opacity
            }else{
                op = (node.currentStyle.filter ||"opacity=100").match(ropacity)[1];
            }
            return (~~op)/100;
        }
        adapter["opacity:set"] = function(node, name, value){
            var currentStyle = node.currentStyle, style = node.style;
            if(!currentStyle.hasLayout)
                style.zoom = 1;//让元素获得hasLayout
            value = (value > 0.999) ? 1: (value < 0.001) ? 0 : value;
            if(node.filters.alpha){
                //必须已经定义过透明滤镜才能使用以下便捷方式
                node.filters.alpha.opacity = value * 100;
            }else{
                style.filter = "alpha(opacity="+((value * 100) | 0)+")";
            }
            //IE7的透明滤镜当其值为100时会让文本模糊不清
            if(value === 1){
                style.filter = currentStyle.filter.replace(ralpha,'');
            }
            style.visibility = value ? "visible" : "hidden";
            if(node.tagName === "TR"){//IE bug，TD与TH不会继承TR的透明度
                var self = arguments.callee;
                dom.slice(node.cells).forEach(function(cell){
                    self(cell,name, value);
                });
            }
        }
        var ie8 = !!global.XDomainRequest,
        border = {
            thin:   ie8 ? '1px' : '2px',
            medium: ie8 ? '3px' : '4px',
            thick: ie8 ? '5px' : '6px'
        };

        adapter[ "_default:get" ] = function(node, name){
            var ret = node.currentStyle && node.currentStyle[name];
            if ((!rnumpx.test(ret) && rnum.test(ret))) {
                // Remember the original values
                var style = node.style,
                left = style.left,
                rsLeft = node.runtimeStyle && node.runtimeStyle.left ;
                if (rsLeft) {
                    node.runtimeStyle.left = node.currentStyle.left;
                }
                style.left = name === 'fontSize' ? '1em' : (ret || 0);
                ret = style.pixelLeft + "px";
                // Revert the changed values
                style.left = left;
                if (rsLeft) {
                    node.runtimeStyle.left = rsLeft;
                }
            }
            if(ret == "medium"){
                name = name.replace("Width","Style");
                //border width 默认值为medium，即使其为0"
                if(arguments.callee(node,name) == "none"){
                    ret = "0px";
                }
            }
            return ret === "" ? "auto" : border[ret] ||  ret;
        }
    });
})(this,this.document);
//2011.9.5
//将cssName改为隋性函数,修正msTransform Bug

相关测试：

dom.define("test/css","spec,css",function(){
    dom.addTestModule("样式操作模块-css",{
        "dom.fn.css":function(){


            var el = dom('<div id="test-div" ' +
                'style="padding-left: 2pt; ' +
                'background: transparent; ' +
                'font-size:16px;' +
                'float: left; ' +
                'border: 5px solid rgb(0,0,0);">css test</div>').appendTo("body");
            el = dom("#test-div")

            expect(el.css( 'float')).eq('left');//1
            expect(el.css( 'position')).eq('static');//2
            expect(el.css( 'backgroundColor')).match(function(val){
                return val == "rgba(0, 0, 0, 0)" || val == "transparent"
            });//3
            expect(el.css( 'backgroundPosition')).eq("0% 0%");//4
            expect(el.css( 'backgroundPositionX')).eq('0%');//5
            expect(el.css( 'fontSize')).eq('16px');//6
            expect(el.css( 'border-right-width')).eq('5px');//7
            var matchFn = function(val){
                val = parseFloat(val)
                return val >= 2 && val <= 3
            }
            expect(el.css( 'paddingLeft')).match(matchFn);//8
            expect(el.css( 'padding-left')).match(matchFn);//9
            expect(el.css( 'padding-right')).eq('0px');//10
            expect(el.css( 'opacity')).eq('1');//11

            // 不加入 dom 节点，ie9,firefox 返回 auto by computedStyle
            // ie7,8 返回负数，offsetHeight 返回0
            //alert(elem.currentStyle.height);== auto
            expect(parseInt(el.css( 'height'))).match(function(val){
                val = parseFloat(val)
                return val >= 18 && val <= 20
            });//12

            el.css( 'float', 'right');

            expect(el.css( 'float')).eq('right');//13

            el.css( 'font-size', '100%');

            expect(el.css( 'font-size')).eq("16px");//14

            el.css( 'opacity', '0.2');

            expect(el.css( 'opacity')).match(function(val){
                val = parseFloat(val);
                return val >= 0.2 && val < 0.21;
            });

            el.css( 'border', '2px dashed red');

            expect(el.css( 'borderLeftWidth')).eq('2px');//16
            el.remove();

        }
    });
});

使用方法与jQuery保持一致，读写器合而为一，set all get first。

      dom.require("css",function(){
        var a = dom('<div style="width:100px;opacity:0.7;filter:alpha(opacity=50),blur(add=ture,direction=135,strength=200)">');
        dom.log( a.css("opacity"))//IE9,FF为0.7;IE6-8为0.5
      });