1. 程式人生 > >setAttribute與style.property:關於初識HTML DOM屬性設定的一點思考

setAttribute與style.property:關於初識HTML DOM屬性設定的一點思考

對於HTML DOM 來說,我一直用setAttribute來設定屬性值,後來很多問題通過

document.getElementsByTagName("id").setAttribute("type","button");

來設定,很多情況都沒有成功。

問了問前端的相關人員,他們說是通過CSS樣式設定來解決。

document.getElementById("id").style.property="值"

可以執行一下下面的程式碼,進行測試:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<style>
body {background-color:yellow; color:black;}
</style>
</head>
<body>

<p>點選按鈕顯示文件的 style 屬性。</p>
<p id="demo" style="background-color:red;">123</p>
<button onclick="myFunction()">嘗試一下</button>
<script>
function myFunction(){
	document.getElementById("demo").style.height = "100px";
	var attr = document.getElementById("demo").style.height;
};
</script>

</body>
</html>

像這種的DOM,無法通過setAttribute來設定,只有通過CSS樣式修改才能成功。前端人員說這是規定。。。我感覺他也不懂。。

但是在css屬性中,我看到對於設定屬性的時候,取出來的ID元素是作為一個物件來進行新增屬性或者修改屬性的。

下面的網址是整理的所有DOM Style屬性列表: