js通過(guò)元素的class屬性獲取元素
lass屬性是dom最為常用的屬性之一，可以通過(guò)它設(shè)置元素的樣式屬性。
如果可以通過(guò)class屬性獲取元素，那么將是一種非常便利的手段，當(dāng)然原生的js也提供了這樣的方法:
getElementsByClassName但是此方法不兼容低版本的IE瀏覽器，下面就分享一段能夠兼容所有瀏覽器的代碼實(shí)例。
此功能在本站的其他章節(jié)也介紹過(guò)，比如getElementsByClassName()用法詳解一章節(jié)。
這里只是再提供一段代碼實(shí)例，或許有不同的實(shí)現(xiàn)思路。
代碼實(shí)例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="/" />
<title>實(shí)例</title>
<script>
function getClass(node,classname) {
if(node.getElementsByClassName) {
return node.getElementsByClassName(classname);
}
else {
var elems = node.getElementsByTagName(node),
defualt = [];
for (var i = 0; i < elems.length; i++) {
if(elems<i>.className.indexOf(classname) != -1) {
defualt[defualt.length] = elems<i>;
}
}
return defualt;
}
}
window.onload=function(){
var odiv=document.getElementById('box'),
elements=getClass(odiv,'antzone');
elements[0].innerHTML='實(shí)例';
}
</script>
</head>
<body>
<div id="box">
<div class="antzone">textcss</div>
</div>
</body>
</html></i></i>相關(guān)推薦
-
將十六進(jìn)制顏色值轉(zhuǎn)換為RGB顏色值代碼實(shí)例
本章節(jié)分享一段代碼實(shí)例它能夠?qū)崿F(xiàn)將十六進(jìn)制顏色值轉(zhuǎn)換為RGB顏色值代碼實(shí)例。如果從RGB顏色值轉(zhuǎn)換為十六進(jìn)制顏色值可以參閱jQury如何將獲取的顏色值轉(zhuǎn)換為十六進(jìn)制形式一章節(jié)。代碼實(shí)例:!DOCT
-
點(diǎn)擊方向鍵實(shí)現(xiàn)文本框焦點(diǎn)切換代碼實(shí)例
本章節(jié)介紹一下如何實(shí)現(xiàn)點(diǎn)擊方向鍵即可實(shí)現(xiàn)切換文本框的焦點(diǎn)的效果。代碼實(shí)例如下:
-
jQuery 動(dòng)畫效果代碼實(shí)例
本章節(jié)分享一段代碼實(shí)例，它使用jqury實(shí)現(xiàn)了簡(jiǎn)單的動(dòng)畫效果。代碼非常的簡(jiǎn)單，比較適合初學(xué)者參考學(xué)習(xí)之用。代碼實(shí)例如下: chrs
-
jQuery實(shí)現(xiàn)的生成隨機(jī)密碼代碼實(shí)例簡(jiǎn)單介紹
本章節(jié)介紹一下如何使用jQury實(shí)現(xiàn)生成隨機(jī)密碼的效果。有需要的朋友可以做一下參考，代碼實(shí)例如下:
-
拖動(dòng)滾動(dòng)條實(shí)現(xiàn)網(wǎng)頁(yè)內(nèi)容自動(dòng)加載代碼實(shí)例
本章節(jié)分享一段代碼實(shí)例，它實(shí)現(xiàn)了向下拖動(dòng)滾動(dòng)條，能夠自動(dòng)加載網(wǎng)頁(yè)內(nèi)容的功能。這種效果在很多網(wǎng)站都有應(yīng)用，當(dāng)然它們加載的內(nèi)容都是從數(shù)據(jù)庫(kù)讀取的，下面的演示自然不能從數(shù)據(jù)庫(kù)讀取內(nèi)容，不過(guò)原理大致如此，實(shí)際
帝國(guó)CMS模板博客文章資訊自適應(yīng)手機(jī)HTML5網(wǎng)站SEO優(yōu)化版
2023-12-26 14:39:32
美文句子文章網(wǎng)站模板自適應(yīng)作文百科資訊源碼
2023-12-22 17:46:01
帝國(guó)CMS模板個(gè)人博客美文佳句文章資訊自適應(yīng)手機(jī)網(wǎng)站源碼
2023-12-19 18:01:32
帝國(guó)cms簡(jiǎn)潔兩端資訊文章句子網(wǎng)美文源碼詩(shī)句模板
2023-12-13 10:58:14
帝國(guó)cms大氣簡(jiǎn)潔資訊文章博客源碼電商資訊教程網(wǎng)站模板
2023-11-30 13:56:14
