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 相关文章推荐
jquery的Theme和Theme Switcher使用小结
Sep 08 Javascript
jQuery 源码分析笔记(2) 变量列表
May 28 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
JS实现向表格中动态添加行的方法
Mar 30 Javascript
js实现跨域的方法实例详解
Jun 24 Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 Javascript
js中document.write和document.writeln的区别
Mar 11 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
Vue项目接入Paypal实现示例详解
Jun 04 Javascript
vue proxy 的优势与使用场景实现
Jun 15 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递归函数返回值使用方法
2013/02/18 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
PHP实现的json类实例
2015/07/28 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
PDO::getAttribute讲解
2019/01/28 PHP
php实现QQ小程序发送模板消息功能
2019/09/18 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
移动手机APP手指滑动切换图片特效附源码下载
2015/11/30 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
简单理解Python中基于生成器的状态机
2015/04/13 Python
Python实现简单的语音识别系统
2017/12/13 Python
Python2.7 实现引入自己写的类方法
2018/04/29 Python
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
英国和爱尔兰最大的地毯零售商:Kukoon
2018/12/17 全球购物
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
英语专业学生的自我评价
2013/12/30 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
小学生表扬稿范文
2015/05/05 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang
JavaScript 对象创建的3种方法
2021/11/17 Javascript
mysql查询结果实现多列拼接查询
2022/04/03 MySQL