js設定css和獲取css的方法

2021-08-25 08:49:04 字數 1034 閱讀 7262

今天寫**,使用 ele.style.height  獲取div的高度height值時出現錯誤:

錯誤**:

#div{

width:100px;

var  aa=document.getelementbyid("div1");

var x=aa.style.width;

alert(x); //彈出的框什麼都沒有

分析:通過js獲取容器寬高度時:

當寬高都寫在樣式表裡,通過aa.style.width拿不到寬度,而通過aa.offsetwidth才可以獲取到寬度

當寬和高是寫在行內中,比如style="width:120px;",這種情況通過上述2個方法都能拿到寬度。

通過js設定容器寬高度:

var  aa=document.getelementbyid("div1");

var  y=aa.offsetwidth;

aa.style.width=y+"px";

總結:

ele.style.attr:該方法只能獲取到行內樣式,獲取不了外部的樣式.  一般用來設定css樣式; 如果去獲取行內沒有的樣式,返回的是空值;     允許設定(比如): ele.style.width="值";

currentstyle屬性和getcomputedstyle屬性不能設定屬性,只能獲取

currentstyle:該屬性只相容ie,不相容火狐和谷歌

寫法:ele.currentstyle["attr"];     或者ele.currentstyle.attr;

getcomputedstyle:該屬性是相容火狐谷歌,不相容ie

寫法:window.getcomputedstyle(ele,null)[attr]  ;或者是window.getcomputedstyle(ele,null).attr

說明:在ie中獲取到的顏色是16進製制的,在火狐谷歌中獲取的顏色是rgb模式的

js獲取css樣式

css樣式分為以下三種 1 內聯樣式 在html元素的內部,又稱行內樣式 2 內部樣式 位於 對樣式進行封裝一下 var ali document.getelementbyid myul1 getelementsbytagname li for var i 0 i基於ie瀏覽器的非行內獲取法 使用 ...

通過js設定css

firefox等可以使用 var dom document.getelementbyid name dom.setattribute style width 10px height 10px border solid 1px red ie中則必須使用style.csstext var dom doc...

js 獲取和設定css3 屬性值的實現方法

眾多周知 css3 增加了很多屬性,在讀寫的時候就沒有原先那麼方便了。如 只考慮行間樣式的話,只需div.style.left就可獲取,設定的時候也只需要div.style.left 100px 即可。很簡單。但是css3來了 如 怎麼搞?被嚇住了。設定的時候很簡單 div.style.webkit...