• Q&A
  • 회원가입
  • 로그인

[Window] JS - getComputedStyle() 메서드 - 계산된 스타일코드 (= CSS계산값) (IE9 이상) ※ RGB코드얻기

getComputedStyle() 예제

 

<button onclick="homzzang()">클릭</button>

<div id="hz" style="line-height: 50px;background-color: yellow;">홈짱닷컴 Homzzang.com</div>

<p>계산된 yellow 배경색코드 : <span id="demo"></span></p>


<script>

function homzzang(){

  var hz = document.getElementById("hz");

  var css = window.getComputedStyle(hz, null).getPropertyValue("background-color");

  document.getElementById("demo").innerHTML = css;

}

</script>

 

결과보기

 

getComputedStyle() 정의

 

지정요소의 모든 실제 (계산된) CSS 속성과 값을 얻음.

 


 

1.

실제 (계산된) CSS 의미:

여러 소스의 "스타일링" 적용 후, 요소 표시에 실제 사용되는 스타일.

 

2.

스타일 소스 종류:

내부스타일시트 / 외부스타일시트 / 상속된스타일 / 브라우저 기본 스타일.

 

3.

getComputedStyle() 메서드는 CSSStyleDeclaration 객체를 반환.

 

 

getComputedStyle() 구문

 

window.getComputedStyle(element, pseudoElement)

 


[매개변수]

 

element

필수. 계산된 스타일코드 얻을 요소

pseudoElement

선택. 얻을 가짜요소 (= 사이비 요소)

 


[반환값]

 

요소의 CSS 선언 블록을 포함하는 CSSStyleDeclaration 객체 반환.

 

 

getComputedStyle() 예제 - 내부스타일 속성값 반환.

 

<style>

#hz {font-family:Verdana, sans-serif;}

</style>


<button onclick="homzzang()">클릭</button>

<div id="hz">홈짱닷컴 Homzzang.com</div>


<script>

function homzzang() {

    var hz = document.getElementById("hz");

    var x = getComputedStyle(hz).getPropertyValue("font-family");

  alert(x);

}

</script>

 

결과보기

PS. 주의: 

내부/외부 스타일로 정의된 속성 경우, document.getElementById("hz").style.fontFamily; 코드로는 반환 X.

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012