管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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>

　　所有浏览器都支持。

教程首页 更多教程