js 给某个div增加class 样式（三种方式）_js给div添加class

作者：爱喝兽奶帝天荒 | 2024-06-28 22:07:52

踩

js给div添加class

第一种： el.setAttribute('class','abc');


<!DOCTYPE HTML> 
<HTML> 
<HEAD> 
<meta charset="utf-8" /> 
<title>setAttribute('class', 'abc')</title> 
<style type="text/css"> 
.abc { 
background: red; 
} 
</style> 
</HEAD> 
<BODY> 
<div id="div">test div</div> 
<script> 
var div = document.getElementById('div'); 
div.setAttribute("class", "abc"); 
</script> 
</BODY> 
</HTML>

第二种： el.setAttribute('className', 'abc');


<!DOCTYPE HTML> 
<HTML> 
<HEAD> 
<meta charset="utf-8" /> 
<title>setAttribute('className', 'abc')</title> 
<style type="text/css"> 
.abc { 
background: red; 
} 
</style> 
</HEAD> 
<BODY> 
<div id="div">test div</div> 
<script> 
var div = document.getElementById('div'); 
div.setAttribute("className", "abc"); 
</script> 
</BODY> 
</HTML>

第三种：el.className = 'abc';


<!DOCTYPE HTML> 
<HTML> 
<HEAD> 
<meta charset="utf-8" /> 
<title>el.className = 'abc'</title> 
<style type="text/css"> 
.abc { 
background: red; 
} 
</style> 
</HEAD> 
<BODY> 
<div id="div">test div</div> 
<script> 
var div = document.getElementById('div'); 
div.className = 'abc'; 
</script> 
</BODY> 
</HTML>

建议使用第三种方法，其他方法可能存在浏览器兼容问题。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/爱喝兽奶帝天荒/article/detail/767456