js中設(shè)置元素class的三種方法小結(jié)

更新時(shí)間：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')

復(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í)候第一個(gè)參數(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> 

所有瀏覽器都支持。

您可能感興趣的文章:

元素
class

相關(guān)文章

微信小程序?qū)崿F(xiàn)跟隨菜單效果和循環(huán)嵌套加載數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)跟隨菜單效果和循環(huán)嵌套加載數(shù)據(jù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
利用百度echarts實(shí)現(xiàn)圖表功能簡單入門示例【附源碼下載】
這篇文章主要介紹了利用百度echarts實(shí)現(xiàn)圖表功能簡單,結(jié)合簡單示例形式分析了echarts插件的圖標(biāo)繪制功能相關(guān)實(shí)現(xiàn)技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下
2019-06-06
微信小程序開發(fā)中的視頻播放和直播功能示例代碼
近期為一家企業(yè)開發(fā)小程序,用戶提出了在小程序中增加直播功能,下面這篇文章主要給大家介紹了關(guān)于微信小程序開發(fā)中視頻播放和直播功能的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-08-08
JavaScript登錄驗(yàn)證基礎(chǔ)教程
這篇文章主要為大家詳細(xì)介紹了JavaScript登錄驗(yàn)證的基礎(chǔ)教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
js控制不同的時(shí)間段顯示不同的css樣式的實(shí)例代碼
這篇文章介紹了js控制不同的時(shí)間段顯示不同的css樣式的實(shí)例代碼，有需要的朋友可以參考一下
2013-11-11
小程序?qū)崿F(xiàn)手寫簽名功能
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)手寫簽名功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
基于JavaScript實(shí)現(xiàn)的折半查找算法示例
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)的折半查找算法,結(jié)合實(shí)例形式分析了折半查找的原理、操作步驟及javascript實(shí)現(xiàn)折半查找的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下
2017-04-04
wangEditor編輯器失去焦點(diǎn)后仍然可以在原位置插入圖片分析
本文給大家?guī)淼氖且豢罘浅２诲e(cuò)的富文本編輯器WangEditor，他最大的特點(diǎn)是它在ie6,7,8上都可以做到失去焦點(diǎn)后仍然可以在原位置插入圖片，而且代碼量很少，下面我們就來分析下他是如何實(shí)現(xiàn)的呢
2015-05-05
JS實(shí)現(xiàn)拼音(字母)匹配漢字(姓名)的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)拼音(字母)匹配(搜索)漢字(姓名)的效果，文中的示例代碼講解詳細(xì)，感興趣的可以了解一下
2023-04-04
JS樣式獲取的封裝方法實(shí)例詳解
這篇文章主要介紹了JS樣式獲取的封裝方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-09-09