首頁 > 開發者 > JavaScript
JavaScript動態設定div的樣式的方法，
有時候需要根據需要動態設定div的樣式，當然對於稍有經驗的javascript開發人員來說，這一切都是那麼的簡單，但是對於初學者或者說沒有相關經驗的開發人員來說可能就是一個不大不小的難關，下面就通過執行個體簡單介紹一下如何?此效果。
代碼執行個體如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><head><title>動態設定div的樣式</title><style type="text/css">div{ width:50px; height:50px; background:red; margin-top:10px;}.bg{ background-color:blue;}</style><script type="text/javascript">window.onload=function(){ var firstDiv=document.getElementById("firstDiv"); var secondDiv=document.getElementById("secondDiv"); var first=document.getElementById("first"); var second=document.getElementById("second"); first.onclick=function(){ firstDiv.style.backgroundColor="green"; } second.onclick=function(){ secondDiv.className="bg"; }}</script></head><body><div id="firstDiv"></div><div id="secondDiv"></div><input type="button" value="使用style方式" id="first" /><input type="button" value="使用className方式" id="second" /></body></html>
以上代碼實現了我們的要求，不過是用了兩種方法，一種是style方式，一種是className方式。
特別注意:
1.使用style時，像background-color這種符合單詞屬性要使用駝峰寫法（第二個單字首大寫），寫成backgroundColo這種形式。
2.使用className時，屬性值是class樣式名稱，但是前面不能加點(.)。
PS：JavaScript動態改變div屬性的實現方法
本文執行個體講述了JavaScript動態改變div屬性的實現方法。分享給大家供大家參考。具體如下：
這裡可以通過JS動態改變div屬性，樣式等
<script type="text/javascript"> var oBox = document.getElementById('box'); var oDiv = document.getElementById('div1'); var aInput = document.getElementsByTagName('input'); var aAttr = ['width', 'height', 'backgroundColor', 'display', 'display']; var aValue = ['200px', '200px', 'red', 'none', 'block']; for(var len=aInput.length,i=0;i<len;i++){ aInput[i].index = i; //索引 aInput[i].onclick = function(){ //重設按鈕,cssText清空DIV屬性 if(this.index == aInput.length - 1)oDiv.style.cssText = ""; //設定DIV屬性 property(oDiv, aAttr[this.index], aValue[this.index]); }; } //控制DIV屬性 function property(obj, attr, value){ obj.style[attr] = value; }</script>
希望本文所述對大家的javascript程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
