js中设置元素class的三种方法小结
117 浏览量
2020-10-28
09:53:06
上传
评论
收藏 29KB PDF 举报
js中设置元素中设置元素class的三种方法小结的三种方法小结
列举所有的方式，看看各浏览器的支持差异。方便用js动态设置元素css的代码。需要的朋友可以参考下。
一、一、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="d1">test div</div>
<script>
var div = document.getElementById('d1');
div.setAttribute("class", "abc");
</script>
</BODY>
</HTML>
IE6/7 : div背景色不是红色
IE8/9/10/Firefox/Safari/Chrome/Opera : div背景色为红色
结果：IE6/7不支持setAttribute('class',xxx)方式设置元素的class。
二、二、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="d1">test div</div>
<script>
var div = document.getElementById('d1');
div.setAttribute("className", "abc");
</script>
</BODY>
</HTML>
IE6/7 : div背景色为红色
IE8/9/10/Firefox/Safari/Chrome/Opera : div背景色不是红色
结果：IE8/9/10/Firefox/Safari/Chrome/Opera不支持setAttribute('className',xxx)方式设置元素的class。
很有趣，使用setAttribute的时候第一个参数为class和className的情形在IE6/7和IE8/9/10/Firefox/Safari/Chrome/Opera刚好
相反。
三、三、el.className = 'abc';
复制代码 代码如下:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset="utf-8" />
<title>el.className = 'abc'</title>
<style type="text/css">
资源评论
weixin_38717156
- 粉丝: 4
- 资源: 887
最新资源
- yolov5,SSD 可能使用到的一些代码
- 基于c51单片机+DS1302+DHT11温湿度模块+LCD1602显示的万年历硬件原理图+BOM+软件程源码序+仿真图.zip
- NSGA2的MATLAB代码
- Messagepassingtest_GCN_DGL.py
- Sh，Docker 运维好帮手，一招通过 sh 脚本批量快速启动和重启多个Docker 容器
- PCF2123.pdf
- 打开注册表操作.doc
- Windows 常见运行运行库32+64
- WMJUL8iC.html
- 基于3KW光伏并网单相逆变器设计(TMS320F28035控制板+显示板+STM32F103功率板)硬件（原理图+PCB）工程
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
