javascript動態改變元素css樣式簡單介紹
使用js動態修改元素的css樣式的方式有很多種,下面就通過程式碼例項做一下簡單介紹。
一.修改元素的style屬性值:
這種方式能夠給樣式最高的權重,直接在元素上修改style屬性。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #antzone{ width:200px; height:100px; background:green; } </style> <script type="text/javascript"> window.onload=function(){ var obt=document.getElementById("bt"); var odiv=document.getElementById("antzone"); obt.onclick=function(){ odiv.style.backgroundColor="red"; } } </script> </head> <body> <div id="antzone"></div> <input type="button" id="bt" value="檢視效果"/> </body> </html>
上面的程式碼演示了相關的方式,非常的簡單。
特別說明:如果遇到background-color或者font-size這種複合屬性,需要使用駝峰寫法,不能夠在使用中橫崗了,因為這個在javascript中是表示減。
二.更改元素的class屬性:
使用className屬性就可以實現此功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #antzone{ width:200px; height:100px; background:green; } .softwhy{ border:1px solid blue; } </style> <script type="text/javascript"> window.onload=function(){ var obt=document.getElementById("bt"); var odiv=document.getElementById("antzone"); obt.onclick=function(){ odiv.className="softwhy"; } } </script> </head> <body> <div id="antzone"></div> <input type="button" id="bt" value="檢視效果"/> </body> </html>
上面的程式碼就可以為元素新增名為softwhy的class屬性值。
如果想要刪除的class樣式類可以參閱js如何動態刪除class樣式屬性值中的指定樣式類一章節。
相關文章
- 動態設定元素的css樣式簡單介紹CSS
- jquery css()方法設定元素的樣式簡單介紹jQueryCSS
- js動態改變css偽類樣式JSCSS
- js獲取元素的樣式值簡單介紹JS
- javascript動態設定元素的樣式簡單程式碼例項JavaScript
- javascript 變數簡單介紹JavaScript變數
- CSS的內聯樣式和外鏈樣式簡單介紹CSS
- JavaScript複製dom元素簡單介紹JavaScript
- javascript 動態修改css樣式JavaScriptCSS
- javascript變數宣告簡單介紹JavaScript變數
- javascript變數汙染簡單介紹JavaScript變數
- javascript函式和變數宣告提前簡單介紹JavaScript函式變數
- javascript操作html元素屬性簡單介紹JavaScriptHTML
- 原生javascript獲取dom元素簡單介紹JavaScript
- javascript DOM元素節點操作簡單介紹JavaScript
- javascript陣列增刪改查簡單介紹JavaScript陣列
- javascript鏈式呼叫簡單介紹JavaScript
- javascript匿名函式簡單介紹JavaScript函式
- javascript動態改變css3的animationJavaScriptCSSS3
- javascript函式讀取變數作用域簡單介紹JavaScript函式變數
- javascript變數作用於簡單介紹JavaScript變數
- javascript變數宣告提升簡單介紹JavaScript變數
- css 改變scroll滾動條的樣式CSS
- jQuery使用css()方法改變元素樣式程式碼例項jQueryCSS
- <svg>元素簡單介紹SVG
- 如何改變函式的執行上下文簡單介紹函式
- CSS 簡單介紹CSS
- css簡單介紹CSS
- CSS樣式簡介CSS
- javascript call()函式用法簡單介紹JavaScript函式
- javascript trim()函式用法簡單介紹JavaScript函式
- javascript高階函式簡單介紹JavaScript函式
- javascript函式呼叫方式簡單介紹JavaScript函式
- JavaScript 簡單介紹JavaScript
- javascript過濾陣列中的元素簡單介紹JavaScript陣列
- CGlib動態代理-簡單介紹CGLib
- 使用JavaScript動態新增CSS樣式規則JavaScriptCSS
- CSS OOCSS簡單介紹CSS