element.classList
classList 是一个只读属性,其返回的值为 DOMTokenList,其中包含了元素的所有 class 属性,不同的 class 属性之间使用一空格分隔。示例如下:<div id="div1" class="bg red">使用classList属性访问</div> <script> var oDiv = document.getElementById("div1"); console.log(oDiv.classList); //输出结果为:DOMTokenList(2) ["bg", "red", value: "bg red"] </script>通过 classList 调用 add()、remove() 和 toggle() 等方法可以添加、移除或修改元素 class 属性,格式如下:
element.classList.add((className1[, className2,…]) //添加一个或多个类属性 element.classList.remove((className1[, className2,…]) //移除一个或多个类属性 element.classList.toggle((className[,true|false]) //移除或添加第一个参数指定的class属性toggle() 中的第一个参数为必需参数,当元素中的存在该参数指定的 class 属性时,将移除该 class 属性,同时返回 false;当不存在该参数指定的 class 属性时,则对元素添加该 class 属性,同时返回 true。第二个参数表示强制添加(参数为 true 时)或移除(参数为 false 时)第一个参数指定的 class 属性。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>使用classList属性设置class属性</title> <style> .bg1{background:#CCC;} .bg2{background:#FCF;} .blue{color:blue;} </style> <script> window.onload = function (){ var oDiv=document.getElementById("div1"); oDiv.classList.add("bg1","blue");//同时添加bg1和blue两个类属性 //oDiv.classList.remove("blue","green");//同时移除blue和green两个类属性 oDiv.onmouseover=function(){ this.classList.toggle("bg2");//添加或移除bg2类属性 }; }; </script> </head> <body> <div id="div1">使用classList属性设置class属性</div> </body> </html>上述 JS 代码中,首先使用 classList 的 add() 方法给 div 元素添加了 bg1 和 blue 两个类属性,使页面运行后显示灰色背景颜色以及蓝色字体。
图14:toggle() 将当前灰色背景修改为粉色
图15:toggle() 将当前粉色背景修改为灰色
本文链接:http://task.lmcjl.com/news/15921.html