脚本化CSS

1. box-sizing:标准css盒模型规定width和height样式属性给定内容区域的尺寸，并且不包含内边距和边框。可以称此盒模型为“内容盒模型”。在老版IE里和新版的CSS中都有一些例外，在IE6之前和当IE6~8在“怪异模式”下显示一个页面时（页面中缺少<!DOCTYPE>或有一个不够严格的doctype时），width和height属性确是包含内边距和宽度的。

2. 脚本化内联样式：style属性是一个CSSStyleDeclaration对象。如果一个CSS属性名包含一个或多个连字符，CSSStyleDeclaration属性名的格式应该是移除连字符，将每个连字符后面紧跟着的字母大写。这样CSS属性border-left-width的值在Javascript中通过borderLeftWidth属性进行访问，另外，当一个CSS属性（如float属性）在JavaScript中对应的名字是保留字时，在之前加css前缀来创建合法的CSSStyleDeclaration名字。由此，使用CSSStyleDescription对象的cssFloat属性来设置或查询CSS float属性。

3. 所有的定位属性都包含单位。因此，如下代码设置left属性是错误的：

    e．style.left=300;//错误：它是数字而不是字符串

    e.style.left=”300”;//错误：缺少单位

4.有时发现作为单个字符串值来设置或查询元素的内联样式反而比作为CSSStyleDeclaration对象更加简单。为此，可以使用getAttribute()和setAttribute（）方法或CSSStyleDeclaration对象的cssText属性来实现。

    //两者都可设置e的样式属性为字符串s；

    e.setAttribute(“style”,s);

    e.style.cssText=s;

    //两者都可查询元素的内联演示

    s=getAttribute(“style”);

    s=e.style.cssText;

5.计算出的样式：用浏览器窗口对象getComputedStyle（）方法来获取一个元素样式。此方法的第一个参数就是要获取其计算样式的元素，第二个参数也是必须的，通常为null或空字符串，但它也可以是命名CSS伪对象的字符串，如“：before”、“：after”、“：first-line”或“：first-letter”。该方法返回一个CSSStyleDeclaration对象，它代表了应用在指定元素（或伪元素）上的样式。表示计算样式的CSSStyleDeclaration对象和表示内联样式的对象之间有一些重要的区别：

    1）  计算样式的属性是只读的。

    2）  计算样式的值是绝对值：类似百分比和点之类相对的单位将全部转换为绝对值。所有指定尺寸（例如外边距大小和字体大小）的属性都有一个以像素为单位的值。该值将是一个冠以“px”后缀的字符串，使用时仍然需要解析它，但是不用担心单位的解析或转换。其值是颜色的属性将以”rgb(#,#,#)”或”rgba(#,#,#,#)”的格式返回。

    3）  不计算复合属性，它们只基于基础属性，它们只基于最基础的属性。例如，不要查询margin属性，应该使用maginLeft和marginTop等。

    4）  计算样式的cssText未定义

    getComputedStyle（）在IE8或更早的版本中没有实现，。在IE中，每个HTML元素有自己的currentStyle属性，它的值是CSSStyleDeclaration对象。IE的currentStyle组合了内联样式和样式表，但它不是真正的计算样式，因为那些相对值都没有转化成绝对值。查询IE的当前样式属性会返回带相对性单位（如“%”，或“em”）的尺寸或非精确颜色值（如“red”）。

6.标识符class在JavaScript中是保留字，所以JavaScript代码中通过className来添加和修改class属性。HTML元素可以有多个CSS类名，class属性保存了一个用空格隔开的类名列表。className属性是一个容易误解的名字：calssNames可能更好。HTML5解决了这个问题，为每个元素定义了classList属性。该属性值是DOMTokenList对象：一个只读的类数组对象，它包含元素的单独类名。但是，和数组元素相比，DOMTokenList定义的方法更加重要。add（）和remove（）从元素的class属性中添加和清除一个类名。toggle（）表示如果不存在类名就添加一个；否则，删除它。最后，contains（）方法检测class属性中是否包含一个指定的类名。DOMTokenList是实时的。以下提供一个兼容方式处理classList的方式。

    /**

     * 如果e有classList属性则返回它。否则为e模拟DOMTokenList

     * 返回对象有contains（），add（），remove（），toggle（）和toString（）等方法

     * 来检测和修改元素e的类集合。如果classList属性是原生支持的，

     * 返回的类数组对象有length和数组索引属性。模拟DOMTokenList不是类数组对象，

     * 但是它有一个toArray（）方法返回一个含元素类名的纯数组快照

     */

    function classList(e){

     if(e.classList){

               return e.classList;

     }else{

               return new CSSClassList(e);

     }

    }

    //CSSClassList是一个MonitorDOMTokenList的JavaScript类

    function CSSClassList(e){

     this.e=e;

    }

    //如果e.className包含类名，则返回true；否则返回false

    CSSClassList.prototype.contains=function(c){

     //检查c是否是合法的类名

     if(c.length===0||c.indexOf(" ")!=-1){

               throw new Error("Invlid classname:'"+c+"'");

     }

     //首先常规检查

     var classes=this.e.className;

     if(!classes){

               return false;//e不含类名

     }

     if(classes===c){

               return true;//e有一个完全匹配的类名

     }

     //否则，把c自身看做一个单词，利用正则表达式搜索c，

     //\b表示正则表达式的边界

     returnclasses.search("\\b"+c+"\\b")!=-1;

    }

    //如果c不存在，将c添加到e.className中

    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;//将c添加到className中

    }

    //将在e.className中出现的所有c都删除

    CSSClassList.prototype.remove=function(c){

     //检查c是否是合法的类名

     if(c.length===0||c.indexOf(" ")!=-1){

               throw new Error("Invlid classname:'"+c+"'");

     }

     //将所有作为单词的c和多余的尾随空格全部删除

     var pattern=newRegExp("\\b"+c+"\\b\\s*","g");

     this.e.className=this.className.replace(pattern,"");

    }

    //如果c存在，将c添加到e.className中，并返回true

    //否则，将在e.className中出现的所有c都删除，并返回false

    CSSClassList.prototype.toggle=function(c){

     if(this.contains(c)){

               this.remove(c);

               return false;

     }else{

               this.add(c);

               return true;

     }

    }

    //返回在e.className本身

    CSSClassList.prototype.toString=function(){

     return this.e.className;

    }

    //返回在e.className中的类名

    CSSClassList.prototype.toArray=function(){

     return this.e.className.match(/\b\w+\b/g)||[];

    }