JavaScript getAttribute()

admin發表於2018-12-04
JavaScript

getAttribute方法可以返回元素指定屬性的值。

如果對應的屬性不存在，那麼方法返回null或者空字串""。

特別說明：如果屬性不存在，在當前標準瀏覽器返回null，比較老舊瀏覽器可能返回""。

與此方法對應的是setAttribute，具體參閱JavaScript setAttribute()一章節。

不少朋友可能有這樣的疑問，直接通過dom物件就可以獲取其對應屬性：

[JavaScript] 純文字檢視 複製程式碼
dom.id

比如上述程式碼可以獲取元素的id屬性值，那為何還要使用getAttribute方法。

後面會通過程式碼例項進行詳細的分析介紹兩者之間的區別差異。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
element.getAttribute(attributename)

引數解析：

（1）.attributename：必需，屬性名稱。

瀏覽器支援：

（1）.IE瀏覽器支援此方法。

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

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

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

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

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

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:120px;
  height:60px;
  text-align:center;
  line-height:60px;
  background-color:#ccc;
}
</style>
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.innerHTML=odiv.getAttribute("id");
  }
}    
</script>
</head>
<body>
  <div id="ant"></div>
  <input type="button" id="bt" value="檢視效果"/>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/04/145536e1b96jw91pe3ubbc.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

點選按鈕可以將div元素的id屬性值寫入div。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:120px;
  height:60px;
  text-align:center;
  line-height:60px;
  background-color:#ccc;
}
</style>
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.innerHTML=odiv.getAttribute("data-ant");
  }
}    
</script>
</head>
<body>
  <div id="ant" data-ant="螞蟻部落"></div>
  <input type="button" id="bt" value="檢視效果"/>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/04/145558kcwfswetr3lwb3te.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.data-ant是符合HTML5規範的自定義屬性，此方法對於非規範自定義屬性同樣有效。

（2）.通過getAttribute方法可以將其屬性值寫入div。

（3）.特別注意的是，屬性名稱必須寫全，這一點與dataset屬性不同。

關於dataset的用法參閱JavaScript dataset 屬性 一章節。

getAttribute方法與dom物件直接獲取屬性值區別：

兩種方式都可以獲取對應屬性的值，但是區別也很明顯。

dom物件只能獲取HTML內建標準屬性的值，比如id或者title，對於自定義屬性返回值為undefined。

getAttribute方法則能力更加強大，沒有上述限制，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  width:120px;
  height:60px;
  text-align:center;
  background-color:#ccc;
}
</style>
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    let str="";
    str=str+odiv.getAttribute("antzone");
    str=str+"<br/>"+odiv.antzone;
    odiv.innerHTML=str;
  }
}    
</script>
</head>
<body>
  <div id="ant" antzone="螞蟻部落"></div>
  <input type="button" id="bt" value="檢視效果"/>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201812/04/145630mbahash1yjx7ojhy.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

再來看一個兩者的區別，對於style屬性和事件屬性，區別也非常明顯：

（1）.dom.style返回的是一個物件，而getAttribute("style")返回的是CSS程式碼。

（2）.dom.onclick之類的返回的是一個方法，而getAttribute("onclick")返回的是程式碼字串。

非常的簡單，感興趣的朋友可以自行做一下演示，如果有不明之處，可以在文章底部留言。

相關文章