HTML5: element.classList API实例：简易样式控切换按钮

 简易样式控切换方法使用了element.classList API，当用户文本框下面按钮时，文本框文本会出变为相应的样式。其它不说了，代码非常简单，自己试一试吧！

 

  演示地址： 进入

  下载地址： html5实例

核心代码

一、为样式控制定义不同样式

<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>