Window getComputedStyle() 메서드

getComputedStyle()메서드는CSSStyleDeclaration객체는 요소의 모든 CSS 속성 값을 포함하는 객체입니다.

계산된 스타일은 여러 출처에서 온 스타일을 적용한 후, 실제로 요소를 표시하는 스타일입니다.

스타일 소스는 다음과 같을 수 있습니다: 내부 스타일 시트, 외부 스타일 시트, 상속된 스타일, 그리고 브라우저 기본 스타일.

可以通过CSSStyleDeclaration对象提供的方法或使用CSS属性名称建立索引来访问各个CSS属性值。

语法：

window.getComputedStyle(element,　pseudoElement)

예제

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

테스트를 보세요‹/›

浏览器兼容性

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

方法
getComputedStyle()	11	4	11.5	5	9

参数值

参数	描述
element	要为其获取计算样式的元素
pseudoElement	（可选）一个字符串，指定要匹配的伪元素。对于真实元素，省略（或为null）。

技术细节

返回值：	一个CSSStyleDeclaration对象，包含元素的CSS声明块，当元素的样式更改时，该对象会自动更新。

更多实例

在此示例中，我们为<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()는 가상 요소에서 스타일 정보를 추출할 수 있습니다(예: :: after, :: before, :firstfirst 등):

예제

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

테스트를 보세요‹/›

JavaScript 객체

JavaScript 참조 매뉴얼

JS DOM 참조 매뉴얼

Window getComputedStyle() 메서드

语法：

浏览器兼容性

参数值

技术细节

更多实例

관련 참조