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

最新推荐文章于 2024-05-06 18:17:39 发布

宝宝宝阿

最新推荐文章于 2024-05-06 18:17:39 发布

阅读量5.2w

点赞数 4

分类专栏： web前端 js 文章标签： javascript class

本文链接：https://blog.csdn.net/yan791124465/article/details/71123664

版权

js 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

web前端

2 篇文章 0 订阅

订阅专栏

第一种： 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>

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