[Window_Object] JS - getComputedStyle() 메서드 - 지정요소의 모든 스타일코드 얻기 (= CSS계산값 = getComputedStyle메서드 = 겟컴퓨티드스타일메서드) (IE9 이상) ※ RGB코드얻기

목차

1. getComputedStyle() 예제 - 스타일 얻기
2. getComputedStyle() 정의
3. getComputedStyle() 구문
4. getComputedStyle() 예제 - 내부스타일 속성값 반환

 

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.