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 小型打飞机游戏实现原理说明
Oct 28 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
详解iframe与frame的区别
Jan 13 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
node.js 中间件express-session使用详解
May 20 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
关于vue-router的那些事儿
May 23 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
Sep 28 Javascript
JavaScript实现简单的弹窗效果
May 19 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
第1次亲密接触PHP5(1)
2006/10/09 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
php计算整个目录大小的方法
2015/06/01 PHP
微信支付开发维权通知实例
2016/07/12 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
读jQuery之三(构建选择器)
2011/06/11 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
Bootstrap精简教程
2015/11/27 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
解决seaborn在pycharm中绘图不出图的问题
2018/05/24 Python
Python中的CSV文件使用&quot;with&quot;语句的方式详解
2018/10/16 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
python 项目目录结构设置
2020/02/14 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
美国山地自行车、露营、户外装备和服装购物网站:Aventuron
2018/05/05 全球购物
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
印度电子产品购物网站:Vijay Sales
2021/02/16 全球购物
董事长秘书岗位职责
2013/11/29 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
Python爬虫之爬取最新更新的小说网站
2021/05/06 Python
python 制作一个gui界面的翻译工具
2021/05/14 Python
python 如何执行控制台命令与操作剪切板
2021/05/20 Python
JavaScript实现贪吃蛇游戏
2021/06/16 Javascript