HTML、CSS及JavaScript：JavaScript征服Style的五種武器_html/css

第一種武器是 className，在JavaScript，得到一個元素的 className就是得到了這個元素的 class屬性的值。Show Code：

上面的代碼拿到 box的 class，然后又給它添加了一個 three。如果想去掉某個 class，只要通過字符串操作去掉，然后重新給 className賦值就可以了。

第二種武器是 style，確切地說，這是個武器包，你幾乎可以用它修改所有 style。比如說你執行了 box.style.width='100px'，就相當于在 box上添加了一個 style="width:100px"。

對于那些由多個單詞組成的style值，就是 background-color、 marigin-top之類的，要把橫線去掉，然后單詞的首字母大寫。對，改成像 backgroundColor、 mariginTop這樣。像 -moz-border-radius這種，也是把 -去掉，然后后面的字母換成大寫，就是改成 MozBorderRadius。

因為style屬性優先與css，所以你可以用style覆蓋掉css中設置的樣式，也可以把它設成空字符串還原：

var box = document.getElementById("box")box.style.width='100px'box.style.width=''

上面的代碼最終會保持box的 width不變。

第三種武器是 cssText，好吧，實際上它也是style中的一個屬性。但因為它很強大，所以我們特意提高了它的地位。用 style.cssText可以獲取和設置完整的style內容。

Button

瀏覽器會對 cssText進行解析，然后把解析結果應用到元素上去。上面代碼中那個不認識blabla就直接忽略掉了，不會報錯，所以要注意typo。

并且如果你想加 !important，只能用 cssText。

接下來要出場的，是真正重量級的兩種武器，或者說一又十分之一種武器。一種是標準的 getComputedStyle，另外一種是它的十分之一變種，自戀的M$IE專為自己打造的 currentStyle（哦，據說它的市場份額只有十分之一了嘛）。

在真實的頁面中，我們很少見到在元素的 style屬性中設置的樣式，所以用 style幾乎讀取不到任何元素的Style。比如下面這個例子：

是得不到任何值的。

這種需求只能靠 window.getComputedStyle來解決，這個方法是 DOM Level 2的標準方法，所有瀏覽器（除了IE < 9）都支持。

所以要獲取上面那個例子中的marginTop，以及所有在瀏覽器給元素應用了style和樣式表之后的Style，都可以像下面這樣：

至于IE 9之前的瀏覽器，就得用 currentStyle讀取了。或者像這樣：

好了，上面就是JavaScript征服Style的五種武器。不過我是只用前面四種武器的，既然用戶到現在還用IE < 9的瀏覽器，我覺得真的無力服侍好啊，所以還是逃吧。

聲明：本文參考(抄襲)了 Styles and classes, getComputedStyle

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com