JavaScript動態建立div並新增樣式

antzone發表於2018-07-07
JavaScript

在實際應用中，往往需要動態的建立一個div，並給其新增指定的文字或者樣式。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
var odiv=document.createElement("div");
odiv.id="thediv";
odiv.style.width="100px";
odiv.style.height="100px";
odiv.style.backgroundColor="red";
window.onload=function(){
  document.body.appendChild(odiv);
}
</script>
</head>
<body>
</body>
</html>

以上程式碼可以動態建立一個div，並且設定它的尺寸和背景色，然後新增到body中。

相關閱讀：

（1）.document.createElement參閱document.createElement()一章節。

（2）.appendChild參閱JavaScript appendChild()一章節。

相關文章