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>