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>