js中設(shè)置元素class的三種方法小結(jié)
更新時間：2011年08月28日 18:12:46 作者：
列舉所有的方式，看看各瀏覽器的支持差異。方便用js動態(tài)設(shè)置元素css的代碼。需要的朋友可以參考下。
一、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背景色為紅色
結(jié)果：IE6/7不支持setAttribute('class',xxx)方式設(shè)置元素的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背景色不是紅色
結(jié)果：IE8/9/10/Firefox/Safari/Chrome/Opera不支持setAttribute('className',xxx)方式設(shè)置元素的class。
很有趣，使用setAttribute的時候第一個參數(shù)為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>
所有瀏覽器都支持。
復(fù)制代碼 代碼如下:
<!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背景色為紅色
結(jié)果：IE6/7不支持setAttribute('class',xxx)方式設(shè)置元素的class。
二、el.setAttribute('className', 'abc')
復(fù)制代碼 代碼如下:
<!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背景色不是紅色
結(jié)果：IE8/9/10/Firefox/Safari/Chrome/Opera不支持setAttribute('className',xxx)方式設(shè)置元素的class。
很有趣，使用setAttribute的時候第一個參數(shù)為class和className的情形在IE6/7和IE8/9/10/Firefox/Safari/Chrome/Opera剛好相反。
三、el.className = 'abc';
復(fù)制代碼 代碼如下:
<!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>
所有瀏覽器都支持。
相關(guān)文章
這篇文章主要介紹了使用JS中的Replace()方法遇到的問題小結(jié),需要的朋友可以參考下2017-10-10
javascript語言是一門優(yōu)秀的腳本語言.其中包含腳本語言的靈活性外還擁有許多高級語言的特性.2011-01-01
javascript實現(xiàn)可拖動變色并關(guān)閉層窗口實例
這篇文章主要介紹了javascript實現(xiàn)可拖動變色并關(guān)閉層窗口的方法,涉及javascript操作層的樣式與屬性的相關(guān)技巧,需要的朋友可以參考下2015-05-05
layuiAdmin循環(huán)遍歷展示商品圖片列表的方法
今天小編就為大家分享一篇layuiAdmin循環(huán)遍歷展示商品圖片列表的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要幫助大家輕松掌握JavaScript代理模式，什么是代理模式？代理的用途，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要為大家詳細介紹了使用js實現(xiàn)動態(tài)背景，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
d3.js入門教程之?dāng)?shù)據(jù)綁定詳解
這篇文章主要介紹了關(guān)于d3.js數(shù)據(jù)綁定的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)只d3.js具有一定的參考價值，需要的朋友下面來一起看看吧。2017-04-04
javascript實例--教你實現(xiàn)撲克牌洗牌功能
我們一般都會按照順序把隨機摸過來的牌從小到大的順序在手上理整齊（記得小時候打牌兩副牌手都抓不過來），這篇隨筆就是想通過實現(xiàn)這個功能來熟悉下js中排序數(shù)組等相關(guān)知識。2014-05-05
下面小編就為大家?guī)硪黄仙Ｕ凧avaScript 函數(shù)表達式。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要介紹了5款JavaScript代碼壓縮工具推薦,代碼壓縮（也稱代碼最小化）是一個從源代碼中消除所有不必要的字符的過程,需要的朋友可以參考下2014-07-07