예
계산 된 취득 (actual showing) 사업부의 배경 색상을 :
<div id="test" style="height: 50px;background-color: lightblue;">Test
Div</div>
<p>The computed background color for the test div is: <span
id="demo"></span></p>
<script>
function myFunction() {
var elem = document.getElementById("test");
var
theCSSprop = window.getComputedStyle(elem,
null).getPropertyValue("background-color");
document.getElementById("demo").innerHTML = theCSSprop;
}
</script>그 결과는 다음과 같습니다
The computed background color for the test div is: rgb(173, 216, 230) »그것을 자신을 시도 더 "Try it Yourself" 아래의 예.
정의 및 사용
getComputedStyle() 메소드는 모든 실제 취득 (computed) , 지정된 요소의 CSS 속성 및 값.
계산 된 스타일은 acutally 여러 소스에서 stylings가이 apllied 된 후, 요소를 표시하는 데 사용되는 스타일입니다.
스타일 소스를 포함 할 수 있습니다 : 내부 스타일 시트, 외부 스타일 시트, 상속 스타일 및 브라우저의 기본 스타일.
getComputedStyle() 메소드는 반환 의 CSSStyleDeclaration 객체를 .
브라우저 지원
테이블의 숫자는 완전히 방법을 지원하는 최초의 브라우저 버전을 지정합니다.
| 방법 | |||||
|---|---|---|---|---|---|
| getComputedStyle() | 11.0 | 9.0 | 4.0 | 5 | 11.5 |
통사론
매개 변수 값 매개 변수 기술 element 필요합니다. 요소는 대한 계산 된 스타일을 얻을 수 있습니다 pseudoElement 선택 과목. 의사 요소는 얻을 수
기술적 세부 사항
반환 값 : 소자의 개체의 CSSStyleDeclaration 함유 CSS 선언 블록.
더 예
예
요소에서 모든 계산 된 스타일을 가져 오기 :
<div id="test" style="height: 50px;background-color: lightblue;">Test
Div</div>
<p>The computed styles for the test div are: <br><span
id="demo"></span></p>
<script>
function myFunction(){
var elem = document.getElementById("test");
var txt;
cssObj = window.getComputedStyle(elem, null)
for
(i = 0; i < cssObj.length; i++) {
cssObjProp = cssObj.item(i)
txt += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
</script> »그것을 자신을 시도 예
(의사 요소를 사용하여) 테스트 사업부의 첫 글자의 컴퓨터 글꼴 크기를 가져옵니다 :
<div id="test" style="height: 50px;background-color: lightblue;">Test
Div</div>
<p>The computed font size for div::first-letter in the test div
is: <span id="demo"></span></p>
<script>
function myFunction(){
var elem = document.getElementById("test");
var
theCSSprop = window.getComputedStyle(elem,
"first-letter").getPropertyValue("font-size");
document.getElementById("demo").innerHTML = theCSSprop;
}
</script> »그것을 자신을 시도