getComputedStyle()

1. getComputedStyle()

•  메소드는 인자로 전달받은 요소의 모든 CSS 속성값을 담은 객체를 회신한다.
• 이 속성값들은, 해당 요소에 대하여 활성 스타일시트와 속성값에 대한 기본 연산이 모두 반영된 결과값이다. 
• 개별 CSS속성 값은 객체를 통해 제공되는 API 또는 CSS 속성 이름을 사용해서 간단히 색인화해서 액세스할 수 있다.
• Inline 스타일은 DOM에 바로 포함되어 있어 DOM 트리에서 접근할 수 있지만,
• 외부 CSS 및 style 태그의 스타일은 CSSOM에서 관리되고, 렌더링 후 getComputedStyle()을 통해 브라우저가 계산한 최종 값을 얻을 수 있다.
• 브라우저는 DOM 트리와 CSSOM(CSS Object Model) 트리를 결합하여 렌더 트리를 만드는데, 이 과정에서 외부 CSS 파일이나 style 태그에 작성된 스타일도 포함된다. 다만 이 스타일들은 메모리에 저장되어 바로 DOM 노드에서 접근할 수 없을 뿐이지, 렌더링이 완료된 후엔 getComputedStyle()을 통해 브라우저가 계산한 최종 적용 스타일을 얻을 수 있다.

let area1 = document.getElementById('area1');
let area2 = document.getElementById('area2');
let area3 = document.getElementById('area3');

// 아래의 코드는 node.style, 즉 dom node tree 에서 획득한 것이다.
// node tree에 유지되는 css정보는 inline-style 만
console.log(area1.style.width); // 200px
console.log(area2.style.width); //
console.log(area3.style.width); //

 

위와 같이 area1의 경우 inline-style로 스타일이며, DOM에 포함이 되어 있어, 돔 트리에서 바로 접근이 가능하다.

하지만 area2, area3의 경우 외부파일, style 태그 스타일이기에 때문에 CSSOM 트리에서 접근을 한다. 

그래서 노드로 획득하기 위해, 아래와 같이 입력한다.

console.log(getComputedStyle(area1).width); // 200pdx
console.log(getComputedStyle(area2).width); // 200px
console.log(getComputedStyle(area3).width); // 200px

 

아래는 스타일 변경인데, 이는 다른 것과 같이 변경을 하면 된다.

area1.addEventListener('click', function () {
  area1.style.backgroundColor = 'yellow';
  area1.style.borderRadius = '50%';
})

 

여기서 오해하면 안되는게, 스타일 변경을 하고자 할 때 위 getComputedStyle()를 통해 변경하는 것이 아니라, 일반적인 스타일을 변경하는 것과 같이 변경을 하면 된다. 그저 getComputedStyle()는 노드를 획득하고자 할 때 사용하는 것이다.