脚本化 css

Javascript 中css 基础知识

1. 从样式表中得到指定值（specified value）
   
2. 把一部分相对单位（em、百分比等）计算成绝对长度，把相对 URI 计算为绝对 URI，得到计算值（computed value），计算值就是用来继承给子元素的。有些值（比如 width、top 的百分比，或者一些 auto 值）不能直接计算，要先得到包含块宽度，也就是需要布局完成才能计算的，它们的计算值与指定值相同；
   
3. 这一步把上面没计算的值进行布局计算，得到应用值（used value);
   
4. 有一些属性值在特定环境下可能无法渲染，比如你给 font-size 或 border-width 设置了小数点值 14.2px，浏览器也许只能渲染整数像素 ，那么会对这些值重新估算，得出实际值（actual value）。
   

 <script language="javascript">
        function css(node, css){
            /*
                设置元素的内联样式
                 var clock = document.getElementById('clock');
                 css(clock, "color: #ff0000;")
                 css(clock, { padding: '40px',
                 "borderLeft":"1px solid #f00"
                 })
             */
            if(typeof css === "string"){
                node.style.cssText = css;
            }else{
                for(var i in css){
                    console.log(i)
                    node.style[i] = css[i];
                }
            }
        }
        function getCss(node, css){
            /*
                获得元素的计算样式
                 .aa{
                 padding-left:30px;
                 margin-left:100px;
                 }
             <div id="clock" class="aa">
              window.onload = function(){
                console.log(document.getElementById('clock').style.marginLeft);  //undefined;

              }

             */
<span style="white-space:pre">		</span>// http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/ 关于 getComputedStyle
           if(window.getComputedStyle){  //IE8 没有getComputedStyle, 并且getComputedStyle返回的是绝对值，如果你设置了width:100%, 返回的值为计算后的值, 而currentStyle 为100%;
               return window.getComputedStyle(node)[css]; //CSSStyleDeclaration
           }else{
               return node.currentStyle[css];  //CSSStyleDeclaration
           }

        }
        /*
            脚本化 css 类
             1. 每个浏览器都有 className属性，可以用来设置和获得元素上的类名，但每次只能是单个的设置，会把之前的类给覆盖
             2. HTML 5 有一个属性，classList, 返回一个DOMTokenList对像, 它实时的代表元素类名的集合， DOMTokenList拥有以下几个方法 contains, add, remove, toggle

         */
        function classList(e){
            if(e.classList) return e.classList;
            else return new CSSClassList(e);
        }
        function CSSClassList(e){
            this.e = e;
        }
        CSSClassList.prototype.contains = function(c){
            //检测c是否是合法的类名
            if(c.length === 0 || c.indexOf(' ') != -1){
                throw new Error("Invalid class name '" + c + "'");
            }
            var classes = this.e.className;
            if(!classes) return false; // 元类没有设置类
            if(classes === c) return true; // 设置了单个类
            return classes.search("\\b" + c + "\\b") != -1;  // 性能更好的方法 return ((" " + classes + " ").indexOf(" " + c + " ") >= 0)
        }
        CSSClassList.prototype.add = function(c){
            if(this.contains(c)) return; //已经存在，直接返回
            var classes = this.e.className;
            if(classes && classes[classes.length -1] != " ") //如果类名的最后一个字符串为空格
                c = " " + c;
            this.e.className += c;
        }
        CSSClassList.prototype.remove = function(c) {
            if(c.length === 0 || c.indexOf(' ') != -1){
                throw new Error("Invalid class name '" + c + "'");
            }
            var pattern = new RegExp("\\b" + c + "\\b\\s*", "g");
            this.e.className.replace(pattern, "");
        };
        //如果c不存在， 添加到className， 并返回true
        //如果c存在， 从className中删除， 并返回false

        CSSClassList.prototype.toggle = function(c){
            if(this.contains(c)){
                this.remove(c)
                return false;
            }else{
                this.add(c);
                return true;
            }

        }
        require(['dojo/dom', 'dojo/query','dojo/dom-attr', 'dojo/_base/array'], function(dom, query, domAttr, array) {
            var clock = dom.byId('clock');

        })
        window.onload = function() {
            var clock = document.getElementById('clock');
            css(clock, "color: #ff0000;")
            css(clock, { padding: '40px',
                "borderLeft":"1px solid #f00"
            })
            console.log(getCss(clock, 'marginLeft'))
            console.log(classList(clock).toggle('ccc'));
        }

在dojo中样式设置需要考虑到opacity 和 float, 而计算样式需要考虑浏览器的兼容性，而且在IE上不能仅依靠currentStyle来获取到元素的 如高，宽值， 如高， 宽等，在自己的实践，很少会需要使用到计算样式，只需考虑设置样式.

dojo的样式设置和获取，请查看 https://github.com/robinxiong/dojo/blob/master/dom-style.js https://github.com/robinxiong/dojo/blob/master/dom-class.js