javascript動態設定元素的樣式簡單程式碼例項

admin發表於2017-04-08
JavaScript

在實際應用中，可能要根據需要動態設定元素的樣式。

下面就通過一段簡單的程式碼例項進行以下演示，非常的簡單，目的是讓初學者有一個初步的概念或者能夠進行一些簡單的操作。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title>
<script>
window.onload=function(){
  var odiv=document.getElementById("antzone");
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.style.width="200px";
    odiv.style.height="150px";
    odiv.style.textAlign="center";
    odiv.style.lineHeight="150px";
    odiv.style.color="red";
    odiv.style.backgroundColor="#ccc";
  }
}
</script>
</head>
<body>
<div id="antzone">螞蟻部落歡迎您</div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

上面的程式碼進行了一下簡單的演示，對上面的程式碼有幾點需要特別說明:

（1）.尺寸單位需要帶有單位px。

（2）.複合屬性需要使用駝峰寫法，比如background-color要寫成backgroundColor，從第二個單詞開始首字母要大寫。

當然還有不少其他的一些小細節，這裡就不多結介紹了。

相關文章