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