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')
<!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的簡單實(shí)現(xiàn)
- js通過元素class名字獲取元素集合的具體實(shí)現(xiàn)
- js選取多個(gè)或單個(gè)元素的實(shí)現(xiàn)代碼(用class)
- 基于原生js實(shí)現(xiàn)判斷元素是否有指定class名
- js 獲取class的元素的方法 以及創(chuàng)建方法getElementsByClassName
- javascript通過class來獲取元素實(shí)現(xiàn)代碼
- js如何根據(jù)class獲取元素并且點(diǎn)擊元素詳解
相關(guān)文章
javascript實(shí)現(xiàn)可拖動變色并關(guān)閉層窗口實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)可拖動變色并關(guān)閉層窗口的方法,涉及javascript操作層的樣式與屬性的相關(guān)技巧,需要的朋友可以參考下2015-05-05layuiAdmin循環(huán)遍歷展示商品圖片列表的方法
今天小編就為大家分享一篇layuiAdmin循環(huán)遍歷展示商品圖片列表的方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09d3.js入門教程之?dāng)?shù)據(jù)綁定詳解
這篇文章主要介紹了關(guān)于d3.js數(shù)據(jù)綁定的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)只d3.js具有一定的參考價(jià)值,需要的朋友下面來一起看看吧。2017-04-04javascript實(shí)例--教你實(shí)現(xiàn)撲克牌洗牌功能
我們一般都會按照順序把隨機(jī)摸過來的牌從小到大的順序在手上理整齊(記得小時(shí)候打牌兩副牌手都抓不過來),這篇隨筆就是想通過實(shí)現(xiàn)這個(gè)功能來熟悉下js中排序數(shù)組等相關(guān)知識。2014-05-05