锐客网

  1. 首页 > it技术 > >

原生js给DOM元素添加一个或者多个类的方法总结

javascript

先看两个例子：
html:

啦啦啦

css：

.test{ width: 100px; height: 100px; background: #B6BAC4; } .test1{ border: 1px solid; width: 200px; border-radius: 4px; } .test2{ margin: 0 auto; } .test3{ font-size: 50px; }

【原生js给DOM元素添加一个或者多个类的方法总结】js:

// 覆盖原来的样式 document.getElementById("test").setAttribute("class","test1"); var dom=document.getElementsByClassName("test")[0].setAttribute("class","test1"); // 追加样式不覆盖原来的样式 document.getElementById("test").classList.add("test1"); document.getElementById("test").classList.add("test1","test2","test3"); var dom=document.getElementsByClassName("test")[0].classList.add("test1"); var dom=document.getElementsByClassName("test")[0].classList.add("test1","test2","test3");

效果：
覆盖：
原生js给DOM元素添加一个或者多个类的方法总结
文章图片

不覆盖：
原生js给DOM元素添加一个或者多个类的方法总结
文章图片

追加多个样式：
原生js给DOM元素添加一个或者多个类的方法总结
文章图片



注意所有的都必须要在DOM获取到的前提下用
其次：再用类名获取DOM的时候会报错：

常见报错——Uncaught TypeError: document.getElementsByClassName(...).addEventListener is not a function 原因：document.getElementsByClassName(...)捕捉到的是该类名元素的数组
正确的访问方式应该是：
document.getElementsByClassName(...)[0].addEventListener...
使用遍历为每个class添加监听：
var classObj = document.getElementsByClassName(...);
for(i=0; iclassObj[i].addEventListener...
} 所以在后面加上数组的下标确定是该类名的哪一个类名下追加或者替换 移出一个
dom.classList.remove("className1");


移除多个类:
dom.classList.remove("className1", "className2", "className3", ....., "classNameN");

检查是否含有某个类
dom.classList.contains('className'); //return true or false



一个综合应用就是给一组类名相同的DOM追加一个或多个相同的样式 html:
  • 111
  • 111
  • 111
  • 111


css:
.test{ width: 100px; height: 100px; background: #B6BAC4; } .test1{ border: 1px solid; width: 200px; border-radius: 4px; } .test2{ margin: 0 auto; } .test3{ font-size: 50px; }


js:
var dom=document.getElementsByClassName("test"); for(var i=0; i

效果： 原生js给DOM元素添加一个或者多个类的方法总结
文章图片




    推荐阅读


    上一篇：裸辞，是我不曾后悔的选择

    下一篇：css3玻璃质感简单实现