getAttribute()和setAttribute()用法

螞蟻小編發表於2017-03-27

本章節通過程式碼例項簡單介紹一下兩個函式地 作用希望能夠給需要的朋友帶來幫助。

標題中的兩個函式是用來獲取或者設定元素的屬性和屬性值，下面分別做一下介紹。

一.getAttribute()函式:

此函式用來獲取指定元素的屬性值。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
obj.getAttribute(attr);

引數解析:

1.obj:要獲取屬性的值的物件。

2.attr:屬性的名稱。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload=function(){
  var obt=document.getElementById("bt");
  var odiv=document.getElementById("thediv")
  obt.onclick=function(){
    odiv.innerHTML=odiv.getAttribute("title");
  }
}
</script> 
</head>
<body>
<div id="thediv" title="螞蟻部落"></div>
<input type="button" id="bt" value="檢視效果"/> 
</body> 
</html>

上面的程式碼點選按鈕可以獲取div的title屬性值。

二.setAttribute()函式:

上面的函式可以獲取元素的屬性值，那麼此元素可以設定元素的屬性值。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
obj.setAttribute(attr,value);

引數解析:

1.obj:要設定屬性的元素物件。

2.attr:要設定的屬性名稱。

3.value:屬性的值。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload=function(){
  var setBt=document.getElementById("setBt");
  var getBt=document.getElementById("getBt");
  var odiv=document.getElementById("thediv")
  setBt.onclick=function(){
    odiv.setAttribute("title","螞蟻部落");
  }
  getBt.onclick=function(){
    odiv.innerHTML=odiv.getAttribute("title");
  }
}
</script> 
</head>
<body>
<div id="thediv"></div>
<input type="button" id="setBt" value="設定屬性"/> 
<input type="button" id="getBt" value="獲取屬性"/> 
</body> 
</html>

上面的程式碼可以先設定一個屬性，然後再獲取此屬性的值。

特別說明:如果屬性不存在，那麼就會先建立此屬性，然後再設定屬性值，如果屬性存在那麼就修改屬性值。

相關文章