HTML5: element.classList API實例：簡易樣式控切換按鈕

簡易樣式控切換方法使用了element.classList API，當用戶文本框下面按鈕時，文本框文本會出變爲相應的樣式。其它不說了，代碼非常簡單，自己試一試吧！

 

      演示地址：進入

      下載地址：Download

核心代碼

一、爲樣式控制定義不同樣式

<style>
…
.big { font-size: 30px; line-height: 30px; }
.bold { font-weight: bold; }
.pink { background: #FF5E99; color: #fff; }
…
</style>
二、定義樣式控制按鈕

<input type="button" value="big" />
<input type="button" value="bold" />
<input type="button" value="pink" />

三、判斷瀏覽器支持

<script>
// checkfor support
var toggle = document.getElementById('toggleClass'),
    test = document.getElementById('classListTest');
if (toggle.classList) {
  var supported = document.getElementById('status');
  supported.parentNode.removeChild(supported);
  // bit of event delegation otherwise we're binding to each input
  toggle.addEventListener('click', function (event) {
    if (event.target.nodeName == 'INPUT') {
      test.classList.toggle(event.target.value);
    }
  }, false);
} else {
  // not supported
}
</script>