| 早先JavaScript处理起来特别不方便，需要先取到class属性，然后对字符串进行处理。 现在html5给所有元素增加了classList属性来操作类属性，非常方便。
1、classList属性先看如下代码： <ul class="nav"> <li class="active">栏目1</li> <li>栏目2</li> <li>栏目3</li></ul><script type="text/javascript"> // 获取到当前的li元素 let activeLi = document.querySelector(".active"); // 打印classList属性 console.log(activeLi.classList) // 控制台输出： // DOMTokenList ['active', value: 'active']</script>控制台查看效果： classList属性类型： 
classList属性是 DOMTokenList 类型，可以通过add、contains、remove等方法对类属性进行操作。
add(value) 新增加一个类名。contains(value) 是否包含类名。remove(value) 删除类名。toggle(value) 如果类名存在则删除，否则添加。
2、实务应用实务中，栏目是切换是很常用的一个应用。接上面的例子，当点击栏目时 将 active 移动到对应的栏目 <ul class="nav"> <li class="item active">栏目1</li> <li class="item">栏目2</li> <li class="item">栏目3</li></ul> <script type="text/javascript"> let currentElement = document.querySelector(".nav").firstElementChild; // 遍历li元素设置点击事件 while (currentElement) { currentElement.onclick = function() { // 移除激活li的active document.querySelector(".active").classList.remove("active"); // 当前li类增加active this.classList.add("active"); } currentElement = currentElement.nextElementSibling; }</script>这样实现起来就很方便了，不用影响到其他类名。 到此这篇关于JavaScript用html5新方法操作元素类名详解的文章就介绍到这了,更多相关JavaScript用html5新方法操作元素类名内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net！
下载地址:
一文了解JavaScript用Element
前端如何更好的展示后端返回的十万条数据 |
