js中设置元素class的三种方法小结


Posted in Javascript onAugust 28, 2011

一、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"> 
.abc { 
background: red; 
} 
</style> 
</HEAD> 
<BODY> 
<div id="d1">test div</div> 
<script> 
var div = document.getElementById('d1'); 
div.className = 'abc'; 
</script> 
</BODY> 
</HTML>

所有浏览器都支持。
Javascript 相关文章推荐
Javascript的并行运算实现代码
Nov 19 Javascript
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
使用js操作cookie的一点小收获分享
Sep 03 Javascript
javascript实现控制div颜色
Jul 07 Javascript
jQuery中 $ 符号的冲突问题及解决方案
Nov 04 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
Aug 23 Javascript
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 Javascript
JS实现的自定义map方法示例
May 17 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 Javascript
Element实现动态表格的示例代码
Aug 02 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 #Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 #Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 #Javascript
js预载入和JavaScript Image()对象使用介绍
Aug 28 #Javascript
jquery 查找iframe父级页面元素的实现代码
Aug 28 #Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 #Javascript
一个JQuery写的点击上下滚动的小例子
Aug 27 #Javascript
You might like
php缓冲 output_buffering的使用详解
2013/06/13 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
PHP实现图片批量打包下载功能
2017/03/01 PHP
Js点击弹出下拉菜单效果实例
2013/08/12 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
JS实现商品筛选功能
2020/08/19 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
基于vue中keep-alive缓存问题的解决方法
2018/09/21 Javascript
总结javascript三元运算符知识点
2018/09/28 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
深入讲解Python中的迭代器和生成器
2015/10/26 Python
Python中的descriptor描述器简明使用指南
2016/06/02 Python
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
Python格式化日期时间操作示例
2018/06/28 Python
Django如何自定义model创建数据库索引的顺序
2019/06/20 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
土木工程专业个人求职信
2013/12/30 职场文书
高一物理教学反思
2014/01/24 职场文书
男方父母婚礼答谢词
2014/01/25 职场文书
葬礼司仪主持词
2014/03/31 职场文书
药品营销策划方案
2014/06/15 职场文书
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python