标签:style color os io 使用 java ar strong for
1、传统方法:
在操作类名的时候,需要通过className属性添加、删除和替换类名。如下面例子:
<div class="bd user disabled">...</div>
<script type="text/javascript"> var className=div.className.split(/\s+/); //找到要删掉的类名 var pos=-1, i,len; for (var i = 0; i < className.length; i++) { if(className[i]=="user"){ pos=i; break; } }; className.splice(i,1); div.className=className.join(" ");//将余下的类名重新拼装 </script>
2、html5新增方法classList(),可以完全摆脱className属性。
具体使用案例如下:
<!DOCTYPE html> <html> <head> <title>classList Example</title> <style> .highlight { background: yellow; } </style> </head> <body> <div id="myDiv" class="init">Hello world!</div> <input type="button" value="Add class" onclick="addClass()"> <input type="button" value="Remove class" onclick="removeClass()"> <input type="button" value="Toggle class" onclick="toggleClass()"> <input type="button" value="Contains class?" onclick="containsClass()"> <p>This demo works in Firefox 3.6 and Chrome 8.</p> <script type="text/javascript"> function addClass(){ var myDiv = document.getElementById("myDiv"); myDiv.classList.add("highlight"); } function removeClass(){ var myDiv = document.getElementById("myDiv"); myDiv.classList.remove("highlight"); } function toggleClass(){ var myDiv = document.getElementById("myDiv"); myDiv.classList.toggle("highlight"); } function containsClass(){ var myDiv = document.getElementById("myDiv"); alert(myDiv.classList.contains("highlight")); } </script> </body> </html>
javascript高级程序设计---classList属性
标签:style color os io 使用 java ar strong for
原文地址:http://blog.csdn.net/zz410675629/article/details/39120009