文章内容
2021/9/29 16:26:39,作 者: 黄兵
纯 Javascript 操作 DOM class
在页面上使用纯 Javascript 操作 class 属性，具体示例如下：
增加 class 属性：
var testarray = document.getElementsByClassName("currentclass");
for(var i = 0; i < testarray.length; i++)
{
testarray[i].className += " classtobeadded";
}另外一种写法：
var testarray = (document).getElementsByClassName("currentclass");
for(var i = 0; i < testarray.length; i++)
testarray.item(i).className += " classtobeadded";删除 class 属性：
var elems = document.querySelectorAll(".widget.hover");
[].forEach.call(elems, function(el) {
el.classList.remove("hover");
});另外一种方法：
var elements = document.getElementsByClassName('widget hover');
while(elements.length > 0){
elements[0].classList.remove('hover');
}或者是：
for (var i = 0; i < elements.length; i++) {
elements[i].classList.remove('hover');
}判断 class 是否包含某个值：
e = document.getElementsByClassName('item');
for(var i = 0; i < e.length; i++) {
// Only if there is only single class
if(e[i].className == 'item') {
// Do something with the element e[i]
alert(e[i].className);
}
}或者是：
for (let i = 0; i < getArticleVideoContainer.length; i++) {
if (getArticleVideoContainer[i].classList.contains('hidden')) {
getArticleVideoContainer[i].classList.remove('hidden');
}
}以上通过纯 Javascript 实现了对 class 的增、删、查等功能，当然如果是 id 更好操作一些，class 多了一个遍历过程。
参考资料：
1、addClass to getElementsByClassName array
2、How to remove a class from elements in pure JavaScript?
3、document.getElementsByClassName exact match to class
黄兵个人博客原创。
评论列表