getElementsByClassName()方法用法介紹

admin發表於2017-03-31

此方法可以通過元素的class屬性獲取元素物件，下面就通過程式碼例項介紹一下它的用法。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
context.getElementsByClassName(className)

引數解析:

1.context:必需，規定查詢範圍，可以是document也可以是其他的元素物件。

2.className:必需，class屬性值，可以是一個也可以是多個，中間用空格分割。

此方法的返回值是一個物件集合。

瀏覽器相容:

（1）.IE9和IE9以上瀏覽器支援此方法。

（2）.谷歌瀏覽器支援此方法。

（3）.火狐瀏覽器支援此方法。

（4）.opera瀏覽器支援此方法。

（5）.safria瀏覽器支援此方法。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
ul li{
  width:400px;
  height:30px;
}
.color{
  color:green;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var lis=document.getElementsByClassName("color");
  for(var index=0;index<lis.length;index++){
    lis[index].style.color="blue";
  }
}
</script>
</head>
<body>
<ul>
  <li>螞蟻部落歡迎您，只有努力奮鬥才會有美好的未來</li>
  <li class="color">沒有任何人一開始就是高手，必須要通過努力</li>
  <li class="color">每一天都是新的，要好好把握當前的生活</li>
  <li>下一秒鐘都是虛無縹緲的，必須要把握好當前</li>
</ul>
</body>
</html>

上面的程式碼可以獲取class屬性值為color的元素集合，並將其中的元素的字型顏色設定為藍色。

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
ul li{
  width:400px;
  height:30px;
}
.color{
  color:green;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var obox=document.getElementById("box");
  var lis=obox.getElementsByClassName("color");
  for(var index=0;index<lis.length;index++){
    lis[index].style.color="blue";
  }
}
</script>
</head>
<body>
<ul id="box">
  <li>螞蟻部落歡迎您，只有努力奮鬥才會有美好的未來</li>
  <li class="color">沒有任何人一開始就是高手，必須要通過努力</li>
  <li class="color">每一天都是新的，要好好把握當前的生活</li>
  <li>下一秒鐘都是虛無縹緲的，必須要把握好當前</li>
</ul>
<ul>
  <li>螞蟻部落歡迎您，只有努力奮鬥才會有美好的未來</li>
  <li class="color">沒有任何人一開始就是高手，必須要通過努力</li>
  <li class="color">每一天都是新的，要好好把握當前的生活</li>
  <li>下一秒鐘都是虛無縹緲的，必須要把握好當前</li>
</ul>
</body>
</html>

上面的設定了此方法的搜尋上下文，只會講id屬性值為box元素下的class屬性值為color的元素的字型顏色設定為藍色。

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
ul li{
  width:400px;
  height:30px;
}
.color{
  color:green;
}
.fontsize{font-size:18px}
</style>
<script type="text/javascript">
window.onload=function(){
  var lis=document.getElementsByClassName("color fontsize");
  for(var index=0;index<lis.length;index++){
    lis[index].style.color="blue";
  }
}
</script>
</head>
<body>
<ul>
  <li>螞蟻部落歡迎您，只有努力奮鬥才會有美好的未來</li>
  <li class="color fontsize">沒有任何人一開始就是高手，必須要通過努力</li>
  <li class="color">每一天都是新的，要好好把握當前的生活</li>
  <li>下一秒鐘都是虛無縹緲的，必須要把握好當前</li>
</ul>
</body>
</html>

此方法的引數可以是兩個class屬性值，中間用空格分割即可。

特別說明:如果要相容所有的主流瀏覽器可以參閱IE8瀏覽器不支援getElementsByClassName()解決方案一章節。

相關文章