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

一、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>

所有浏览器都支持。

js中设置元素class的三种方法小结相关推荐

Linux 中设置环境变量的三种方法
1.export 变量名=value 2.变量名=value ; export 变量名 3.declare -x 变量名=value 自定义全局环境变量 1.编辑 /etc/profile vim / ...
JS中阻止冒泡事件的三种方法
冒泡事件:比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这一过程被称为事件冒泡. <div class="box"><button c ...
Android中设置文本颜色的三种方法
2019独角兽企业重金招聘Python工程师标准>>> 1.利于系统自带的颜色类如TextView1.setTextColor(Android.graphics.Color.RED ...
js之删除对象属性的三种方法判断对象中是否有某一属性的四种方法
js之删除对象属性的三种方法 & 判断对象中是否有某一属性的四种方法示例 1.基础版 var a = { id: 18, age: 20, name: "zhangsan" ...
vue修改http请求头_vue-resouce设置请求头的三种方法
本文主要介绍了vue-resouce设置请求头的三种方法,分享给大家,具体如下: 第一种:在Vue实例中设置 var vm = new Vue({ el:'#rrapp', data:{ showLi ...
mysql在计算机管理中的路径怎么修改_Rstudio中修改工作路径的三种方法
原文链接: Rstudio中修改工作路径的三种方法_weixin_44370085的博客-CSDN博客_rstudio改变工作目录blog.csdn.net Rstudio中修改工作路径的三种方法 ...
设置环境变量的三种方法【转载】
文章目录 1 设置环境变量的三种方法 1.1 临时设置 1.2 当前用户的全局设置 1.3 所有用户的全局设置 2 测试当前环境变量 3 脚本解析 3.1 打开的文件如下: 3.2 脚本解析说明 3. ...
c++语言定义排序函数,关于C++中定义比较函数的三种方法小结
C++编程优与Pascal的原因之一是C++中存在STL(标准模板库).STL存在很多有用的方法. C++模板库中的许多方法都需要相关参数有序,例如Sort().显然,如果你想对一个集合进行排序,你必 ...
Java中遍历Set集合的三种方法
Map集合:链接: Map集合的五种遍历方式及Treemap方法 Set集合:链接: Java中遍历Set集合的三种方法 TreeSet集合:链接: Java深入了解TreeSet,和迭代器遍历方法 ...

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

js中设置元素class的三种方法小结相关推荐

最新文章

热门文章