javascript實現的設定和獲取元素屬性

admin發表於2017-03-31
JavaScript

本章節介紹一下如何利用原生的javascript設定和獲取元素的屬性值。

這個屬性可以是元素內建屬性，也可以是自定義的屬性。

一.設定元素的屬性:

[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 odiv=document.getElementsByTagName("div")[0];
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.setAttribute("url","softwhy.com");
  }
}
</script> 
</head>
<body>
<div></div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的程式碼，點選按鈕可以給div元素新增一個自定義屬性，屬性值是"softwhy.com"。

效果截圖如下:

a:3:{s:3:\"pic\";s:43:\"portal/201703/31/131852aeclx3rww3mnvlx3.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

二.獲取元素屬性值:

[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 odiv=document.getElementsByTagName("div")[0];
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.innerHTML=odiv.getAttribute("url");
  }
}
</script> 
</head>
<body>
<div url="softwhy.com"></div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的程式碼可以獲取div元素的url屬性值，並寫入div中。

相關閱讀:

1.setAttribute()方法可以參閱setAttribute()一章節。

2.getAttribute()方法可以參閱javascript getAttribute()一章節。

3.innerHTML屬性可以參閱js innerHTML一章節。

相關文章