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 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      });