Window getComputedStyle() 方法

JavaScript Window 對象

getComputedStyle()方法返回一個CSSStyleDeclaration對象，該對象包含元素的所有CSS屬性的值。

計(jì)算出的樣式是在應(yīng)用了來自多個來源的“樣式”之后，實(shí)際用于顯示元素的樣式。

樣式源可以包括：內(nèi)部樣式表，外部樣式表，繼承的樣式和瀏覽器默認(rèn)樣式。

可以通過CSSStyleDeclaration對象提供的方法或使用CSS屬性名稱建立索引來訪問各個CSS屬性值。

語法：

window.getComputedStyle(element, pseudoElement)
var heading = document.getElementsByTagName("h1")[0];
var x = window.getComputedStyle(heading, null).getPropertyValue("color");
測試看看?/?

瀏覽器兼容性

表格中的數(shù)字指定了完全支持getComputedStyle()方法的第一個瀏覽器版本：

方法
getComputedStyle()11411.559

參數(shù)值

參數(shù)描述
element要為其獲取計(jì)算樣式的元素
pseudoElement（可選）一個字符串，指定要匹配的偽元素。對于真實(shí)元素，省略（或?yàn)閚ull）。

技術(shù)細(xì)節(jié)

返回值：一個CSSStyleDeclaration對象，包含元素的CSS聲明塊，當(dāng)元素的樣式更改時，該對象會自動更新。

更多實(shí)例

在此示例中，我們?yōu)?lt;p>元素設(shè)置樣式，然后使用getComputedStyle()檢索這些樣式，并將其打印到<p>的文本內(nèi)容中：

let para = document.querySelector('p');
let compStyles = window.getComputedStyle(para);

para.innerHTML = 'font-size: ' + compStyles.getPropertyValue('font-size');
para.innerHTML += '<br>line-height: ' + compStyles.getPropertyValue('line-height');
para.innerHTML += '<br>padding: ' + compStyles.getPropertyValue('padding');
測試看看?/?

從元素獲取所有計(jì)算出的樣式：

let para = document.querySelector('p');
let compStyles = window.getComputedStyle(para);

for (let i = 0; i < compStyles.length; i++) { 
prop = compStyles.item(i);
txt += prop + " = " + compStyles.getPropertyValue(prop) + "<br>";
}
測試看看?/?

getComputedStyle()可以從偽元素中提取樣式信息（例如:: after，:: before，：firstfirst等）：

var div = document.getElementsByTagName("div")[0];
var x = window.getComputedStyle(div, "first-letter").getPropertyValue("font-size");
測試看看?/?

相關(guān)參考

CSS教程：CSS教程

CSS教程：CSS偽元素

CSS參考：CSS屬性

JavaScript參考：CSSStyleDeclaration對象

CSSStyleDeclaration：getPropertyValue()方法

HTML參考：HTML樣式屬性

HTML參考：HTML <style>標(biāo)記

JavaScript Window 對象

丰满人妻一级特黄a大片，午夜无码免费福利一级，欧美亚洲精品在线，国产婷婷成人久久Av免费高清