js獲取css屬性值的方法

2021-10-19 10:27:38 字數 2185 閱讀 4839

obj.style: 它只能夠獲取通過style設定的元素css屬性值：

無法獲取定義在裡面的屬性,這時getcomputedstyle()就可以發揮作用了 ，它可以獲取到指定元素對應css屬性的最終計算值。

<


!doctype html>


"en"


>


"utf-8"


>


"viewport" content=


"width=device-width, initial-scale=1.0"


>


document<


/title>


.ss<


/style>


<


/head>


'css88'


class


='ss' style=


'width:200px; height:200px; background:#333333'


>


js獲取css屬性值<


/div>


alert


(document.


getelementbyid


(「css88″)


.style.width)


;//200px


alert


(document.


getelementbyid


(「css88″)


.style.color)


;//null


<


/script>


<


/body>


<


/html>
window.getcomputedstyle(dom元素，【偽類】)，不相容ie瀏覽器(obj.currentstyle)。

window.


getcomputedstyle


(el)等價於 document.defaultview.


getcomputedstyle


(el)
「dom2級樣式」增強了document.defaultview，提供了getcomputedstyle()方法。這個方法接受兩個引數：要取得計算樣式的dom元素和乙個偽元素字串（例如「:after」）。如果不需要偽元素資訊，第二個引數可以是null。getcomputerstyle()方法返回乙個實時的cssstyledeclaration物件，包含當前元素的所有計算的樣式。當元素的樣式更改時，它會自動更新本身。

<


!doctype html>


"en"


>


計算元素樣式<


/title>


#mydiv 


<


/style>


"mydiv" style=


" border:1px solid black"


>


<


/div>


var mydiv = document.


getelementbyid


("mydiv");


var computedstyle = document.defaultview.


getcomputedstyle


(mydiv,


null);


alert


(computedstyle.backgroundcolor)


;//"red"


alert


(computedstyle.width)


;//"100px"


alert


(computedstyle.height)


;//"200px"


alert


(computedstyle.border)


;//在某些瀏覽器中是「1px solid black」


<


/script>


<


/body>


<


/head>


<


/html>


<


/span>
下面這個函式，能夠獲取乙個元素的任意 css 屬性值。

function


getstyle


(element,attr)


else


}

JS獲取CSS屬性值

obj.style方法，這個方法只能js只能獲取寫在html標籤中的寫在style屬性中的值 style 看一下 code x m,m0 u7 l i8 y0 j 3 n l n f y r c.q i z o 5 q u g p8 i js獲取css屬性值 u8 w o5 t z a c3 k i...

原生js獲取css屬性值

使用方法 obj.style.left這個方法js只能獲取在html標籤中的寫在style屬性中的值 style 即行內樣式，而無法獲取定義在樣式表裡面的屬性。使用方法 window.getcomputedstyle obj,false getpropertyvalue background col...

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

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