您的位置：首页 > Web前端 > JavaScript

javascript高级程序设计---classList属性

2014-09-07 15:17 344 查看

1、传统方法：

在操作类名的时候，需要通过className属性添加、删除和替换类名。如下面例子：

<div class="bd user disabled">...</div>

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

注：但是目前classList属性只有FireFox3.6+和Chrome支持。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航