使用JS動態改變元素樣式

2021-06-26 14:08:09 字數 813 閱讀 8964

今天寫了個小網頁,需要使用js動態改變元素樣式,結果很多麻煩,從網上找了一些解決辦法總算搞定。總結一下

改變樣式有三種辦法,***.style.stylename ,***.style.csstext,和***.classname

光文字不好說啊,還是舉栗子吧

假定var mydiv=document.getelementbyid("div1");

第一種 mydiv.style.width="400px",但是這種方式侷限在行內樣式,它是通過改變行內的style來改變的。與中的樣式無關,如果沒有在行內style沒有寫width,那這種方法是無效的。

第二種 mydiv.style.csstext="width:400px;height:200px"   可以批量改動樣式

第三種  mydiv.classname="mystyle1" 需要在頭部style中或者外部檔案中先寫好乙個樣式,然後動態地設定乙個元素的樣式。可以批量設定,我認為這種方式最好(如果積累的css庫中有適用的,那豈不是樂壞了),不過網頁很小的話就沒這個必要。需要注意的是在某些瀏覽器下不是classname,而是mydiv.class="*****",不是通用的。

另外通過改變css可以改變整個網頁的樣式,可以做網頁模板。

csstext是我今天才學到的,也是隨意總結一下。關於設定樣式有篇寫得比較全面部落格  js修改css樣式style**

(突然感到寫部落格壓力山大啊,雖然只是一篇短短的渣文也要花很多時間,構思蒐集等等。膜拜頂級博主…)

js改變元素樣式

1.js改變由style方式引用的樣式 方法一 document.divs.style.csstext border 1px solid 000000 color ff0000 方法二 document.divs.setattribute style border 1px solid 000000 ...

用JS改變的元素CSS樣式

css樣式的引用有3種方式 style引用 class引用 id引用,所以js改變元素的樣式我們也分3種來說。1.js改變由style方式引用的樣式 方法一 document.divs.style.csstext border 1px solid 000000 color ff0000 方法二 do...

用JS改變的元素CSS樣式

css樣式的引用有3種方式 style引用 class引用 id引用,所以js改變元素的樣式我們也分3種來說。1.js改變由style方式引用的樣式 方法一 document.divs.style.csstext border 1px solid 000000 color ff0000 方法二 do...