[JS] JS에서 요소의 스타일 접근하는 방법

😃 이번시간에는 JS로 요소의 스타일에 접근하는 방법인, window.getComputedStyle와 Element.style에 대해 알아보았다!

1. 스타일에 접근하는 방법

1) getComputedStyle()?

(1) 형태

window.getComputedStyle(el[, pseudo-class]);

• getComputedStyle는 요소(el)의 모든 CSS 속성값을 객체 형태(CSSStyleDeclaration)로 반환해준다.
• 첫번째 인자로는 요소(el), 두번째 인자로는 의사요소(:checked, :first-child)을 넘길 수 있다.
• 두번째 인자는 옵션이며 기본값은 null이지만, 특정 브라우저(Firefox 4, SeaMonkey 2.1) 전에는 필수값이므로, 값을 꼭 넘겨줘야한다.

(2) 예시

• 첫 번째 예시로, 클래스가 title인 p요소의 글자 크기에 접근해보았다.
• window.getComputedStyle로 반환된 스타일 객체는, getPropertyValue(’속성명’)을 이용해 특정 CSS 속성값을 가져올 수 있다.

See the Pen getComputedStyle-1 by KumJungMin (@kumjungmin) on CodePen.

• 이번에는 두번째 인자도 사용해보았다.
• 클래스가 title인 p요소에 ::after 가상클래스가 존재한다.
• getComputedStyle(title, '::after')를 사용해 가상 클래스의 content에 접근했다.

See the Pen getComputedStyle-1 by KumJungMin (@kumjungmin) on CodePen.

2) Element.style?

(1) 형태

Element.style

• Element.style은 요소의 인라인 스타일을 객체(CSSStyleDeclaration)형태로 반환한다.
• 만약 특정 속성값에 접근하고자 한다면 Element.style.속성명 형태로 사용해야 한다.

(2) 예시

• 앞서 본 예시처럼, 클래스가 title인 p요소의 글자 크기에 접근해보았다.
• 인라인으로 선언된 font-size에 접근해야하므로, title.style.fontSize를 사용해주었다.

See the Pen html.style - 1 by KumJungMin (@kumjungmin) on CodePen.

3) getComputedStyle와 Element.style의 차이

🤔 우린 앞서 CSS 속성값을 가져오는 법을 살펴봤는데, 이 둘은 어떤 차이가 존재할까? 한 번 알아보자!

(1) 스타일 변경 가능 유무

• 만약 JS에서 요소의 스타일 속성값을 변경하고 싶다면, 어떤 방법을 써야할까?
• 아래 예시는 Element.style, window.getComputedStyle를 사용하여 글자 크기를 30px로 변경한 결과이다.

See the Pen style vs getComputedStyle by KumJungMin (@kumjungmin) on CodePen.

• 결과를 보면 알 수 있듯이, Element.style의 경우, 속성값 재정의가 가능했다.
• 하지만 window.getComputedStyle의 경우 속성 재정의가 불가했다.
• 그 이유는 해당 스타일 객체는 계산된 값이므로 readonly 상태이기 때문이다.(하단 에러 콘솔 참고)

(2) 접근가능한 스타일 범위

• window.getComputedStyle는 요소의 모든 스타일 값을 가져올 수 있다.
• 하지만 Element.style의 경우 요소의 인라인 스타일만 접근가능하기에 <style>에 정의한 글자 색상에는 접근할 수 없다 😢

See the Pen Element.style vs getComputedStyle(2) by KumJungMin (@kumjungmin) on CodePen.

(3) 의사 요소 접근 가능 여부

• window.getComputedStyle는 두 번째 인자로 의사요소를 넘길 수 있어, 의사요소의 스타일에 접근할 수 있다.
• 하지만 Element.style은 요소의 인라인 스타일 값에만 접근할 수 있는데, 의사 요소의 경우 인라인 스타일로 선언이 불가하다.
• 결국, 요소의 의사요소에 접근하려면 window.getComputedStyle를 사용하는 게 좋다 🙂

See the Pen getComputedStyle-1 by KumJungMin (@kumjungmin) on CodePen.