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

先看两个例子:

html:

<div class="test" id="test">
 啦啦啦
</div>

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:

// 覆盖原来的样式
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");

效果:

覆盖

不覆盖:

追加多个样式:

注意所有的都必须要在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;i<classObj.length;i++){
classObj[i].addEventListener...
}
所以在后面加上数组的下标确定是该类名的哪一个类名下追加或者替换
移出一个
dom.classList.remove("className1");
 
 

移除多个类:

dom.classList.remove("className1", "className2", "className3", ....., "classNameN");

检查是否含有某个类

dom.classList.contains('className'); //return true or false

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

html:
<ul>
    <li class="test" id="1" >111</li>
    <li class="test" id="2" >111</li>
    <li class="test" id="3" >111</li>
    <li class="test" id="4" >111</li>
</ul>
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<dom.length;i++){
    dom[i].classList.add("test1");
}

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

傻小胖

如果觉得不错就给点赏钱吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值