JavaScript征服Style的五種武器

海興發表於2016-06-15
JavaScript

在HTML的世界裡，對於一個元素來說，看的主要不是氣質，而是它的Style，因為Style決定了顏值。俗話說，JavaScript與Style，得其一者得天下。但是，Style永遠無法改變JavaScript，JavaScript卻可以征服Style。因為JavaScript有五種武器，所以可以對Style為所欲為，既可遠觀，亦可褻玩。

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

<div id="box" class="one two"/>
<script>
  var box = document.getElementById("box")
  alert(box.className)
  box.className += ' three'
</script>

上面的程式碼拿到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內容。

<div>Button</div>
<script>
  var div = document.body.children[0]
  div.style.cssText='color: red !important; \
    background-color: yellow; \
    width: 100px; \
    text-align: center; \
    blabla: 5; \
  '
  alert(div.style.cssText)
</script>

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

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

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

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

<style>
  body { margin: 10px }
</style>
<body>
  <script>
    alert(document.body.style.marginTop)
  </script> 
</body>

是得不到任何值的。

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

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

<style>
  body { margin: 10px }
</style>
<body>

  <script>
    var computedStyle = getComputedStyle(document.body, null)
    alert(computedStyle.marginTop)
  </script>

</body>

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

<style>
  body { margin: 10% }
</style>
<body>
<script>
    if (window.getComputedStyle) {
      var computedStyle = getComputedStyle(document.body, null)
    } else {
      computedStyle = document.body.currentStyle
    }
    alert(computedStyle.marginTop)
  </script>
</body>

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

宣告：本文參考(抄襲)了Styles and classes, getComputedStyle

相關文章