今天逛贴吧无意中发现classList的新属性,
classList是className的升级版,
问:classList的给我们带来的什么?
答:1:我们可以方便的实现对Dom的class属性进行操作(增加,修改,删除)了;
2:添加此节点已经存在的类名会自动过滤
具体代码如下:
js 代码:
window.onload=function () {
var tDom=document.getElementById("testD");
if(tDom.className==tDom.classList.toString()){
console.log(JSON.stringify(tDom.classList));
}
var _domClassList=tDom.classList;
_domClassList.adds("d2 d3 d2 d4");
//添加多个属性自己扩展!
//此时dom渲染的class值并已经改变;
console.log(_domClassList.contains("d"));//true 是否存在d 类名;
_domClassList.remove("d"); //删除
console.log(_domClassList.item(1));//获取
//** if visible is set remove it, otherwise add it
_domClassList.toggle("visible");
};
<!--扩展一个adds 一次可以添加多个class 不会添加已经存在的类-->
DOMTokenList.prototype.adds = function(tokens) {
tokens.split(" ").forEach(function(token) {
this.add(token);
}.bind(this));
return this;
};
html:
<div id="testD" class="a b c">hello! classList</div>
网友评论