Metodo Window getComputedStyle()

Oggetto Window JavaScript

getComputedStyle()Il metodo restituisce unCSSStyleDeclarationOggetto, che contiene i valori di tutte le proprietà CSS dell'elemento.

Lo stile calcolato è lo stile effettivamente utilizzato per visualizzare l'elemento dopo aver applicato lo stile proveniente da più fonti.

La sorgente dello stile può includere: fogli di stile interni, fogli di stile esterni, stili ereditati e stili predefiniti del browser.

Può essereCSSStyleDeclarationIl metodo fornito dall'oggetto o l'accesso ai valori delle proprietà CSS tramite il nome dell'attributo CSS.

语法：

window.getComputedStyle(element, pseudoElement)

var heading = document.getElementsByTagName("h1")[0];
var x = window.getComputedStyle(heading, null).getPropertyValue("color");

浏览器兼容性

表格中的数字指定了完全支持getComputedStyle()方法的第一个浏览器版本：

参数值

技术细节

更多实例

在此示例中，我们为<p>元素设置样式，然后使用getComputedStyle()检索这些样式，并将其打印到<p>的文本内容中：

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');

从元素获取所有计算出的样式：

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() può estrarre informazioni di stile da pseudo-elementi (ad esempio:: after, :: before, :firstfirst, ecc.):

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

Riferimenti correlati

Tutorial CSS:Tutorial CSS

Tutorial CSS:Pseudo-elemento CSS

Riferimento CSS:Proprietà CSS

Riferimento JavaScript:Oggetto CSSStyleDeclaration

CSSStyleDeclaration:Metodo getPropertyValue()

Riferimento HTML:Proprietà di stile HTML

Riferimento HTML:Etichetta <style> HTML

Oggetto Window JavaScript