使用cssText為元素一次設定多個樣式屬性值
本章節介紹一下cssText屬性為指定元素設定多個樣式屬性值。
在介紹之前先看一段程式碼例項:
[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:150px; height:100px; background:green; } </style> <script type="text/javascript"> window.onload=function(){ var odiv=document.getElementById("antzone"); odiv.style.textAlign="center"; odiv.style.fontSize="12px"; } </script> </head> <body> <div id="antzone" style="color:red">螞蟻部落</div> </body> </html>
上面是我們最為常見的設定元素樣式的方式,其實我們完全可以使用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:150px; height:100px; background:green; } </style> <script type="text/javascript"> window.onload=function(){ var odiv=document.getElementById("antzone"); odiv.style.cssText="text-align:center;font-size:12px"; } </script> </head> <body> <div id="antzone" style="color:red">螞蟻部落</div> </body> </html>
上面的程式碼基本實現了我們的要求,和第一個程式碼一樣設定的文字的對齊方式和字型大小。
但是還有一個問題就是,字型原本是紅色的,現在效果沒了,這是因為cssText能夠覆蓋style設定的樣式,所以這一點需要注意一下,還有一點需要注意的是在IE8和IE8以下瀏覽器中,此屬性的返回的樣式值,最後一個後面沒有分號。
相關文章
- 通過js一次性為元素設定多個樣式屬性JS
- jquery css()一次性為多個元素設定多個樣式jQueryCSS
- jQuery如何設定元素的屬性值jQuery
- jQuery使用css()方法設定元素的display屬性值jQueryCSS
- cssText 屬性CSS
- animate()方法以一次設定多個屬性
- 設定和獲取元素固有屬性值
- js cssText 屬性JSCSS
- 使用樣式類為某一型別的元素設定樣式型別
- CSS內聯樣式的使用,設定字型屬性CSS
- javascript通用獲取元素樣式屬性值程式碼例項JavaScript
- 如何為要被列印的內容設定CSS樣式屬性CSS
- jQuery建立一個元素同時設定元素的屬性jQuery
- 行內元素屬性設定
- css設定具有指定type屬性值的input文字框的樣式CSS
- canvas—元素樣式設定Canvas
- js dom元素樣式設定相關style屬性介紹JS
- CSS 設定前n個li元素樣式CSS
- CSS設定第n個li元素樣式CSS
- CSS 設定第n個li元素樣式CSS
- jquery設定href屬性值jQuery
- HTML中設定多個class屬性css的優先順序,css樣式覆蓋HTMLCSS
- cssText批量修改樣式CSS
- C#反射設定屬性值和獲取屬性值C#反射
- javascript使用style方式設定元素的樣式JavaScript
- jQuery根據多個屬性匹配元素jQuery
- CSS 設定svg元素樣式CSSSVG
- JS如何設定元素樣式?JS
- jquery如何設定帶有important的樣式屬性jQueryImport
- css設定第2個li元素的樣式CSS
- 原生javascript如何設定元素的屬性JavaScript
- JavaScript使用name屬性值獲取元素物件JavaScript物件
- css匹配type屬性值為text的input元素CSS
- 權值有的時候我們為同一個元素設定了不同的CSS樣式程式碼CSS
- js如何獲取樣式表中定義的css屬性值JSCSS
- css設定type為text的input元素的樣式CSS
- EasyExcel為單個Cell設定樣式Excel
- jquery改變元素屬性值jQuery