計算後樣式

2021-09-29 07:18:58 字數 1059 閱讀 7533

1,高階瀏覽器和低階瀏覽器的不同寫法。

現在我們只能得到行內的樣式,事實上dom提供了可靠的api,得到計算後的樣式。

w3c制定的標準api所有現代瀏覽器(包括ie9,但不包括之前的版本)都實現了window.getcomputedstyle(),該方法接受乙個要進行樣式計算的元素,並返回乙個樣式物件。樣式物件提供了乙個名為getpropertyvalue()的方法,用於檢索特定樣式屬性的計算樣式。getpropertyvalue方法接受css屬性名稱,而不是駝峰式的名稱。getpropertyvalue()可以不寫直接用方括號來檢索屬性也可以。

get得到,computed計算後,style樣式

get得到,property屬性,vaule值

比如:window.getcoputedstyle(odiv).getpropetyvalue(「width」)

所有window物件的方法,都可以不用寫window。

比如:alert方法是window物件的方法,所以我們可以簡寫:window.alert(「哈哈哈」);等價於alert(「哈哈哈」);

得到計算後的樣式,可以直接使用getcomputedstyle函式,而不用寫window。

getcomputedstyle(odiv).getpropertyvalue(「window」)

getcomputedstyle(odiv).getpropertyvalue(「padding-left」)

getpropertyvalue看上去就像打他,看著就不爽,所以可以簡寫:

getcomputedstyle(odiv)[「psdding-left」]

計算後樣式是綜合的結果,就是這個元素此時的狀態:現在有css:

雖然沒有顯示指定background-position,但是有值:

getcomputedstyle(odiv)[「background-position」] // 10px 10px;

dom提供給js的api非常好,乙個元素此時的狀態,完完全全可以被得到。

計算後的樣式

一 高階瀏覽器和低階瀏覽器的不同寫法 w3c制定的標準 api,所有 現代瀏覽器 包括ie9,但不包括之前的版本 都實現了 window.getcomputedstyle 該方法接收乙個要進行樣式計算的元素,並返回乙個 樣式物件 樣式物件 提供了getpropertyvalue 的方法,用於檢索特定...

獲取CSS計算後的樣式

window.onload function else console.log width var width window.getcomputedstyle div width var width div.currentstyle.width json遍歷 var opation for var ...

獲取計算後樣式的方法(相容版)

標準下獲取計算後樣式getcomputedstyle el attr ie下獲取計算後樣式el.currentstyle attr 相容版封裝函式 function getstyle el,attr return getcomputedstyle el attr 注 el 元素 attr 屬性名稱 ...