javascript如何獲取屬性值

antzone發表於2017-04-13
JavaScript

在很多時候，我們要取元素指定屬性的屬性值以便在程式碼中使用，下面就結合例項簡單介紹一下次功能，先看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body,ul,li{ 
  margin:0; 
  padding:0; 
  font-size:13px;
}
ul,li{
  list-style:none;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var mylis=document.getElementsByTagName("a");
  for (var index = 0; index < mylis.length; index++) {
    alert(mylis[index].attributes["selectid"].value);
  }
}
</script>
</head>
<body>
<ul>
<li><a href="#" selectid="1">導航選單</a></li>
<li><a href="#" selectid="2">焦點幻燈片</a></li>
<li><a href="#" selectid="3">廣告程式碼</a></li>
<li><a href="#" selectid="4">網頁特效</a></li>
<li><a href="#" selectid="5">jquery特效</a></li>
</ul>
</body>
</html>

以上程式碼可以便利所有的a元素，並且可以讀取指定屬性的屬性值，能夠相容各主流瀏覽器。下面簡單介紹一下實現過程:

一.實現原理:

通過for迴圈能夠遍歷每一個a元素，attributes屬性可以獲取元素的所具有的屬性集合，然後通過相應的屬性名稱獲取對應的屬性值。

二.程式碼註釋:

1.var mylis=document.getElementsByTagName("a")獲取a元素的集合。

2.for(var index=0;index<mylis.length;index++)能夠便利a元素集合，並且使用alert(mylis[index].attributes["selectid"].value)彈出每一個a元素的selectid屬性的屬性值。

相關文章