javascript如何動態設定div的樣式
有時候需要根據需要動態設定div的樣式,當然對於稍有經驗的javascript開發者來說,這一切都是那麼的簡單,但是對於初學者或者說沒有相關經驗的開發者來說可能就是一個不大不小的難關,下面就通過例項簡單介紹一下如何實現此效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!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樣式名稱,但是前面不能加點(.)。
相關文章
- JavaScript動態建立div並新增樣式JavaScript
- javascript動態設定div的顯示和隱藏JavaScript
- javascript動態設定元素的樣式簡單程式碼例項JavaScript
- 使用javascript動態設定div垂直水平居中程式碼JavaScript
- js動態設定div的內容JS
- jQuery動態設定div元素的尺寸jQuery
- javascript 動態修改css樣式JavaScriptCSS
- javascript動態設定一個div圖層覆蓋住另一個div圖層,並設定成透明JavaScript
- JavaScript 動態設定colSpanJavaScript
- 動態設定元素的css樣式簡單介紹CSS
- JavaScript動態更改引入樣式表JavaScript
- JavaScript動態設定float浮動JavaScript
- jQuery動態設定div元素的高度和寬度jQuery
- javascript使用style方式設定元素的樣式JavaScript
- jquery動態設定為元素樣式程式碼例項jQuery
- js動態設定元素css樣式程式碼例項JSCSS
- Hype如何設定字型樣式
- 如何設定連結樣式
- JS如何設定元素樣式?JS
- 使用JavaScript動態新增CSS樣式規則JavaScriptCSS
- div滾動條樣式,水平滾動
- javascript動態設定input文字框的值JavaScript
- Android開發之動態設定字型的樣式和粗細Android
- 設定div滾動條
- 如何動態載入外部樣式表
- JavaScript動態設定文字字型大小JavaScript
- JavaScript動態設定元素背景圖片JavaScript
- JavaScript動態建立div並寫入文字JavaScript
- JavaScript動態新增和刪除div元素JavaScript
- 如何解決div樣式拉伸問題
- JavaScript 設定div顯示與隱藏JavaScript
- JavaScript 動態設定input文字框只讀JavaScript
- 使用js動態建立div元素並設定其文字內容JS
- JavaScript 動態建立div併為其新增文字JavaScript
- javascript動態設定字型的大小程式碼例項JavaScript
- 如何正確設定動態TextView的textSizeTextView
- HTML5畫布如何設定線的樣式?HTML
- jquery如何設定帶有important的樣式屬性jQueryImport