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 相关文章推荐
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
js复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
node.js中的forEach()是同步还是异步呢
Jan 29 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
js返回顶部实例分享
Dec 21 Javascript
js实现自定义进度条效果
Mar 15 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
Apr 13 Javascript
Node.js 使用流实现读写同步边读边写功能
Sep 11 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
ionic3双击返回退出应用的方法
Sep 17 Javascript
基于javascript实现日历功能原理及代码实例
May 07 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
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
php文件操作相关类实例
2015/06/18 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
2019/10/17 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
js实现移动端轮播图
2020/12/21 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
详解numpy矩阵的创建与数据类型
2019/10/18 Python
图解Python中深浅copy(通俗易懂)
2020/09/03 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
波兰数码相机及配件网上商店: Cyfrowe.pl
2017/06/19 全球购物
清扬洗发水广告词
2014/03/14 职场文书
入职担保书范文
2014/05/21 职场文书
物理课外活动总结
2014/08/27 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
2016年清明节寄语
2015/12/04 职场文书
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫
Vue ECharts实现机舱座位选择展示功能
2022/05/15 Vue.js
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL