腳本化CSS

1. box-sizing:標(biāo)準(zhǔn)css盒模型規(guī)定width和height樣式屬性給定內(nèi)容區(qū)域的尺寸，并且不包含內(nèi)邊距和邊框?？梢苑Q此盒模型為“內(nèi)容盒模型”。在老版IE里和新版的CSS中都有一些例外，在IE6之前和當(dāng)IE6~8在“怪異模式”下顯示一個(gè)頁(yè)面時(shí)（頁(yè)面中缺少<!DOCTYPE>或有一個(gè)不夠嚴(yán)格的doctype時(shí)），width和height屬性確是包含內(nèi)邊距和寬度的。

2. 腳本化內(nèi)聯(lián)樣式：style屬性是一個(gè)CSSStyleDeclaration對(duì)象。如果一個(gè)CSS屬性名包含一個(gè)或多個(gè)連字符，CSSStyleDeclaration屬性名的格式應(yīng)該是移除連字符，將每個(gè)連字符后面緊跟著的字母大寫(xiě)。這樣CSS屬性border-left-width的值在Javascript中通過(guò)borderLeftWidth屬性進(jìn)行訪問(wèn)，另外，當(dāng)一個(gè)CSS屬性（如float屬性）在JavaScript中對(duì)應(yīng)的名字是保留字時(shí)，在之前加css前綴來(lái)創(chuàng)建合法的CSSStyleDeclaration名字。由此，使用CSSStyleDescription對(duì)象的cssFloat屬性來(lái)設(shè)置或查詢CSS float屬性。

3. 所有的定位屬性都包含單位。因此，如下代碼設(shè)置left屬性是錯(cuò)誤的：

    e．style.left=300;//錯(cuò)誤：它是數(shù)字而不是字符串

    e.style.left=”300”;//錯(cuò)誤：缺少單位

4.有時(shí)發(fā)現(xiàn)作為單個(gè)字符串值來(lái)設(shè)置或查詢?cè)氐膬?nèi)聯(lián)樣式反而比作為CSSStyleDeclaration對(duì)象更加簡(jiǎn)單。為此，可以使用getAttribute()和setAttribute（）方法或CSSStyleDeclaration對(duì)象的cssText屬性來(lái)實(shí)現(xiàn)。

    //兩者都可設(shè)置e的樣式屬性為字符串s；

    e.setAttribute(“style”,s);

    e.style.cssText=s;

    //兩者都可查詢?cè)氐膬?nèi)聯(lián)演示

    s=getAttribute(“style”);

    s=e.style.cssText;

5.計(jì)算出的樣式：用瀏覽器窗口對(duì)象getComputedStyle（）方法來(lái)獲取一個(gè)元素樣式。此方法的第一個(gè)參數(shù)就是要獲取其計(jì)算樣式的元素，第二個(gè)參數(shù)也是必須的，通常為null或空字符串，但它也可以是命名CSS偽對(duì)象的字符串，如“：before”、“：after”、“：first-line”或“：first-letter”。該方法返回一個(gè)CSSStyleDeclaration對(duì)象，它代表了應(yīng)用在指定元素（或偽元素）上的樣式。表示計(jì)算樣式的CSSStyleDeclaration對(duì)象和表示內(nèi)聯(lián)樣式的對(duì)象之間有一些重要的區(qū)別：

    1）  計(jì)算樣式的屬性是只讀的。

    2）  計(jì)算樣式的值是絕對(duì)值：類似百分比和點(diǎn)之類相對(duì)的單位將全部轉(zhuǎn)換為絕對(duì)值。所有指定尺寸（例如外邊距大小和字體大?。┑膶傩远加幸粋€(gè)以像素為單位的值。該值將是一個(gè)冠以“px”后綴的字符串，使用時(shí)仍然需要解析它，但是不用擔(dān)心單位的解析或轉(zhuǎn)換。其值是顏色的屬性將以”rgb(#,#,#)”或”rgba(#,#,#,#)”的格式返回。

    3）  不計(jì)算復(fù)合屬性，它們只基于基礎(chǔ)屬性，它們只基于最基礎(chǔ)的屬性。例如，不要查詢margin屬性，應(yīng)該使用maginLeft和marginTop等。

    4）  計(jì)算樣式的cssText未定義

    getComputedStyle（）在IE8或更早的版本中沒(méi)有實(shí)現(xiàn)，。在IE中，每個(gè)HTML元素有自己的currentStyle屬性，它的值是CSSStyleDeclaration對(duì)象。IE的currentStyle組合了內(nèi)聯(lián)樣式和樣式表，但它不是真正的計(jì)算樣式，因?yàn)槟切┫鄬?duì)值都沒(méi)有轉(zhuǎn)化成絕對(duì)值。查詢IE的當(dāng)前樣式屬性會(huì)返回帶相對(duì)性單位（如“%”，或“em”）的尺寸或非精確顏色值（如“red”）。

6.標(biāo)識(shí)符class在JavaScript中是保留字，所以JavaScript代碼中通過(guò)className來(lái)添加和修改class屬性。HTML元素可以有多個(gè)CSS類名，class屬性保存了一個(gè)用空格隔開(kāi)的類名列表。className屬性是一個(gè)容易誤解的名字：calssNames可能更好。HTML5解決了這個(gè)問(wèn)題，為每個(gè)元素定義了classList屬性。該屬性值是DOMTokenList對(duì)象：一個(gè)只讀的類數(shù)組對(duì)象，它包含元素的單獨(dú)類名。但是，和數(shù)組元素相比，DOMTokenList定義的方法更加重要。add（）和remove（）從元素的class屬性中添加和清除一個(gè)類名。toggle（）表示如果不存在類名就添加一個(gè)；否則，刪除它。最后，contains（）方法檢測(cè)class屬性中是否包含一個(gè)指定的類名。DOMTokenList是實(shí)時(shí)的。以下提供一個(gè)兼容方式處理classList的方式。

    /**

     * 如果e有classList屬性則返回它。否則為e模擬DOMTokenList

     * 返回對(duì)象有contains（），add（），remove（），toggle（）和toString（）等方法

     * 來(lái)檢測(cè)和修改元素e的類集合。如果classList屬性是原生支持的，

     * 返回的類數(shù)組對(duì)象有length和數(shù)組索引屬性。模擬DOMTokenList不是類數(shù)組對(duì)象，

     * 但是它有一個(gè)toArray（）方法返回一個(gè)含元素類名的純數(shù)組快照

     */

    function classList(e){

     if(e.classList){

               return e.classList;

     }else{

               return new CSSClassList(e);

     }

    }

    //CSSClassList是一個(gè)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+"'");

     }

     //首先常規(guī)檢查

     var classes=this.e.className;

     if(!classes){

               return false;//e不含類名

     }

     if(classes===c){

               return true;//e有一個(gè)完全匹配的類名

     }

     //否則，把c自身看做一個(gè)單詞，利用正則表達(dá)式搜索c，

     //\b表示正則表達(dá)式的邊界

     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;//如果已經(jīng)有類，則加空格

     }

     this.e.className+=c;//將c添加到className中

    }

    //將在e.className中出現(xiàn)的所有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中出現(xiàn)的所有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)||[];

    }