TIL no.19 - window.getComputedStyle

element의 style 태그 내에 있는 속성들의 값을 읽기위해 사용하는 method입니다.
element.style."attribute"의 경우,
특정 값을 할당할 때는 사용할 수 있지만
현재 element.style."attribute"내에 들어있는 값을 읽어오는 것은 불가능하기 때문입니다.

1. 문법

let style = window.getComputedStyle(element);

let styleValue = style.getPropertyValue(style-property);

2. 예제

HTML

<p>Hello</p>

CSS

p {
  width: 400px;
  margin: 0 auto;
  padding: 20px;
  line-height: 2;
  font-size: 2rem;
}

JavaScript

let para = document.querySelector('p');
let compStyles = window.getComputedStyle(para);
let paraFontSize = compStyles.getPropertyValue('font-size');
console.log(paraFontSize);

실행 결과

"52px"