JS 巧用cssText屬性 操作樣式

2022-07-23 12:45:20 字數 815 閱讀 3020

給乙個html元素設定css屬性,傳統做法:

varmybox

=document.getelementbyid(

"mybox

");  

mybox.style.width ="

200px

";  

mybox.style.height ="

70px

";  

mybox.style.display ="

block

";  

這樣寫很煩,尤其是很多的時候,乙個樣式一行,天啊!

工具函式 :

function

setstyle(obj,css)

varmybox 

=document.getelementbyid(

"mybox");

setstyle(mybox,)

使用csstext屬性,想怎麼寫就怎麼寫:

varmybox 

=document.getelementbyid(

"mybox

");  

mybox.style.csstext="

width:200px;height:70px;display:bolck

";  

測試瀏覽器版本如下(與瀏覽器模式無關):

ie 6/7

ie 8 (emulate ie7)

ie 8 (enforce ie8)

opera 10.10

firefox 3.5.6

safari 4.0.3

chrome 4.0.266.0

巧用cssText屬性批量操作樣式

給乙個html元素設定css屬性 var d document.getelementbyid container d.style.height 7px d.style.weight 17px 和innerhtml一樣,csstext很快捷且所有瀏覽器都支援。一組樣式屬性及其值的文字表示。將文字格式化...

巧用cssText屬性批量操作樣式

給乙個html元素設定css屬性,如12 34varhead document.getelementbyid head head.style.width 200px head.style.height 70px head.style.display block 這樣寫太羅嗦了,為了簡單些寫個工具函式...

css text文字屬性(三)

1.text decoration屬性 作用 設定文字修飾線。取值 text decoration line 不支援 指定文字裝飾的種類。相當於 css1 時的text decoration屬性 text decoration style 不支援 指定文字裝飾的樣式。text decoration ...