js中設(shè)置元素class的三種方法小結(jié)
更新時(shí)間：2011年08月28日 18:12:46 作者：
列舉所有的方式，看看各瀏覽器的支持差異。方便用js動(dòng)態(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í)候第一個(gè)參數(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í)候第一個(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>
所有瀏覽器都支持。
您可能感興趣的文章:
- js獲取class的所有元素
- js獲取某元素的class里面的css屬性值代碼
- javaScript給元素添加多個(gè)class的簡(jiǎn)單實(shí)現(xiàn)
- js通過(guò)元素class名字獲取元素集合的具體實(shí)現(xiàn)
- js選取多個(gè)或單個(gè)元素的實(shí)現(xiàn)代碼（用class）
- 基于原生js實(shí)現(xiàn)判斷元素是否有指定class名
- js 獲取class的元素的方法 以及創(chuàng)建方法getElementsByClassName
- javascript通過(guò)class來(lái)獲取元素實(shí)現(xiàn)代碼
- js如何根據(jù)class獲取元素并且點(diǎn)擊元素詳解
相關(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)圖表功能簡(jiǎn)單入門示例【附源碼下載】
這篇文章主要介紹了利用百度echarts實(shí)現(xiàn)圖表功能簡(jiǎn)單,結(jié)合簡(jiǎn)單示例形式分析了echarts插件的圖標(biāo)繪制功能相關(guān)實(shí)現(xiàn)技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2019-06-06
近期為一家企業(yè)開發(fā)小程序,用戶提出了在小程序中增加直播功能,下面這篇文章主要給大家介紹了關(guān)于微信小程序開發(fā)中視頻播放和直播功能的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08
這篇文章主要為大家詳細(xì)介紹了JavaScript登錄驗(yàn)證的基礎(chǔ)教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
js控制不同的時(shí)間段顯示不同的css樣式的實(shí)例代碼
這篇文章介紹了js控制不同的時(shí)間段顯示不同的css樣式的實(shí)例代碼，有需要的朋友可以參考一下2013-11-11
這篇文章主要為大家詳細(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ī)?lái)的是一款非常不錯(cuò)的富文本編輯器WangEditor，他最大的特點(diǎn)是它在ie6,7,8上都可以做到失去焦點(diǎn)后仍然可以在原位置插入圖片，而且代碼量很少，下面我們就來(lái)分析下他是如何實(shí)現(xiàn)的呢2015-05-05
JS實(shí)現(xiàn)拼音(字母)匹配漢字(姓名)的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)拼音(字母)匹配(搜索)漢字(姓名)的效果，文中的示例代碼講解詳細(xì)，感興趣的可以了解一下2023-04-04
這篇文章主要介紹了JS樣式獲取的封裝方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09