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 

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 

相关测试：

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


            var el = dom('<div  ' +
                ' +
                '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 >');
        dom.log( a.css("opacity"))//IE9,FF为0.7;IE6-8为0.5
      });