JavaScript中设置元素class，添加/删除元素class的方法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript中设置元素class，添加/删除元素class的方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1237字，纯文字阅读大概需要2分钟。

内容图文

方式一、el.setAttribute('class','a');

.a{
    color: red;
}

#id  box

var box = document.getElementById('box');
box.setAttribute('class','a');

IE6/7 : div背景色不是红色
IE8/9/10/Firefox/Safari/Chrome/Opera : div背景色为红色

结果：IE6/7不支持setAttribute('class','xxx')方式设置元素的class。

方式二、el.setAttribute('className', 'a');

.a{
    color: red;
}

#id  box

var box = document.getElementById('box');
box.setAttribute('className','a');

IE6/7 : div背景色为红色
IE8/9/10/Firefox/Safari/Chrome/Opera : div背景色不是红色

结果：IE8/9/10/Firefox/Safari/Chrome/Opera不支持setAttribute('className','xxx')方式设置元素的class。

注意：以上两种方式都存在兼容性问题

方式三、el.className = 'abc';（兼容性好）

.a{
    color: red;
}
.b{
    font-size: 18px;
}

#id  box

var box = document.getElementById('box');
box.className = 'a';
box.className += ' b'; //前加空格

结果：所有浏览器都支持。

除此之外还有其他方式

使用 el.classList 添加和删除class

.a{
    color: red;
}
.b{
    font-size: 18px;
}
.c{
    background: #8A2BE2;
}
#id  box

var box = document.getElementById('box');
//console.log(box.classList);
box.classList.add('a');      //添加
box.classList.remove('b');   //删除
box.classList.toggle('c') //如果有相应的class就删除，没有就添加
var if_b = box.classList.contains('a'); //查找有没有相应的 class，返回true/false
console.log(if_b);

内容总结

以上是互联网集市为您收集整理的JavaScript中设置元素class，添加/删除元素class的方法全部内容，希望文章能够帮你解决JavaScript中设置元素class，添加/删除元素class的方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端