-
[2020.07.11] 자바스크립트 - Element.style 속성과 getComputedStyle() 메소드의 차이에 대해 알아보자개발 블로깅/Javascript 개념 2020. 7. 12. 15:20
브라우저에 그려진 엘리먼트의 스타일을 가져오는 방법에는 두 가지가 있다.
- Element.style 속성 참조
- getComputedStyle() 메소드
나는 이 두 가지의 차이에 대해 정확하게 알지 못한 채, 엘리먼트의 스타일에 접근하는 작업을 하다가 내가 예상하던 대로 동작하지 않아 엄청 헤맨 경험을 맛 보았다.
그래서 이번에 닥쳤던 문제를 해결하면서 정확하게 알게 된 엘리먼트의 스타일에 대해 아래 예시를 통해서 정리해보려고 한다.# 각기 다른 방식으로 적용된 엘리먼트 두 개
우선 위와 같이 그려진 브라우저 화면이 있다.
해당 코드는 다음과 같다.<!DOCTYPE html> <html> <head> <style> #second-element { color: green; } </style> </head> <body> <div id="first-element" style="color: red;"> 첫 번째 엘리먼트 </div> <div id="second-element"> 두 번째 엘리먼트 </div> </body> </html>첫 번째 엘리먼트는 인-라인 방식으로 해당 엘리먼트에 글자색 스타일을 직접 선언하고, 두 번째 엘리먼트는 body태그 바깥에서 style 태그를 이용해서 외부에서 선언하도록 했다.
이제 우리는 자바스크립트를 이용해서, 이 두 엘리먼트의 스타일 값을 가져와 보도록 할 것이다.
자바스크립트에서 엘리먼트의 스타일 값을 가져오는 방법
우선 첫 번째로는 element.style 속성을 이용해서 스타일 값을 가져오는 방법이다.
const element = document.getElementById("엘리먼트 아이디"); // 특정 엘리먼트 노드 가져오기 const style = element.style; // 해당 엘리먼트에 적용된 스타일 가져오기이를 이용하여, 우선 인-라인으로 정의된 첫 번째 엘리먼트의 스타일 값을 가져와보자.
# 첫 번째 엘리먼트의 스타일 속성 가져오기
const style = document.getElementById('first-element').style; console.log(style.color) // "red"첫 번째 엘리먼트의 노드 데이터를 가져와서 style 속성을 참조해보니, 빨간색 글자를 적용하는 스타일 속성을 가져올 수 있었다.
그러면 이번엔 <body> 태그 바깥에서 스타일이 선언된 두 번째 엘리먼트의 스타일 값을 가져오도록 해보자.
과연 똑같은 방식으로 스타일 값을 가져올 수 있을까?# 두 번째 엘리먼트의 스타일 속성 가져오기
const element = document.getElementbyId('second-element'); console.log(element.style.color) // ""두 번째 엘리먼트의 스타일 값을 가져오려고 하니, 아무것도 적용된 사항이 없는 빈 데이터를 가져오게 된다.
하지만 브라우저 화면에서는 글자색 스타일이 정상적으로 적용이 되어있다.왜 이런 것일까?
원인
우선 엘리먼트의 속성에 대해서 먼저 알아보자.
엘리먼트의 속성이라 함은, 태그 내의 인-라인으로 정의한 것들을 말한다.예를 들어서 아래의 <a> 태그를 확인해보자.
<a id="a-tag" href="http://www.naver.com" style="color: blue;"> 링크입니다. </a>위의 <a> 태그의 엘리먼트는 속성으로 id, href, style을 가지고 있다.
그리고 자바스크립트에서는 아래와 같이 해당 속성을 가져올 수 있다.# <a> 태그의 속성 확인하기
이와 같이, 인-라인으로 스타일이 정의된 첫 번째 엘리먼트도 노드 자체에 스타일 속성으로 스타일이 적용되어 있으므로 style 키워드만으로 가져올 수 있는 것이다.
# 첫 번째 엘리먼트의 속성을 직접 확인
위 화면에서는 해당 노드에만 적용된 스타일의 값인 것을 확인할 수 있다.
하지만 우리는 두 번째 엘리먼트의 스타일을 태그 자체에다가 직접 속성으로 정의하지 않았다.
# 두 번째 엘리먼트의 속성을 직접 확인
두 번째 태그를 살펴보면, 첫 번째 엘리먼트와는 다르게, 속성 자체에는 적용된 사항이 아무것도 없는 것을 확인할 수 있다.
다만, 'second-element'라는 아이디를 가진 엘리먼트에게 어떤 스타일을 가지게 할 것인지 선언만 되어있을 뿐이다.그래서 자바스크립트로 두 번째 엘리먼트 데이터를 가져와서 해당 엘리먼트의 style 속성을 참조해보면 아무것도 없는 빈 데이터가 반환되는 것이다.
💡그래도 결국 아이디를 통해 스타일을 가지게 되었으니, 결국 해당 엘리먼트의 속성이 아닌가요?
=> 이는 DOM 영역의 노드들이 브라우저에 그려질 때, 외부에 선언된 스타일을 참조하여 브라우저에 그려지는 것이지, 실제로 DOM 영역의 해당 노드들에게 속성으로 적용하는 것이 아니기 때문이다. 그래서 style 키워드는 해당 DOM의 노드를 직접 가져오는 것이기 때문에, 브라우저에는 스타일이 적용된 채로 그려지지만 노드 자체에는 스타일 값이 없는 것이다.그렇다면 이러한 외부 선언된 엘리먼트의 스타일을 가져오기 위해서는 어떻게 해야 할까?
자바스크립트에서 외부 선언된 엘리먼트의 스타일 값 가져오기
이때 우리는 브라우저에서 제공하는 getComputedStyle() 메소드를 이용할 수 있다.
const element = document.getElementById('second-element'); console.log(window.getComputedStyle(element).color) // "rgb(0,128,0)"Style 속성으로는 가져오지 못했던 스타일 값을, getComputedStyle() 메소드에서는 가져올 수 있는 것을 확인할 수 있다.
그러면 이 메소드의 정체는 대체 정체가 무엇이길래 이것이 가능한 것일까?
# window.getComputedStyle() 메소드란?
getComputedStyle() 메소드는 인자로 전달받은 엘리먼트에 최종적으로 적용된 모든 CSS 속성 값을 담은 객체를 반환한다.
아래 예시를 들어보자.
외부 선언된 두 번째 엘리먼트에다가 배경 색을 파란색으로 변경하는 스타일을 속성으로 직접 추가했다.
그러면 해당 엘리먼트가 직접적으로 가지고 있는 스타일의 속성은 background-color 뿐이다.이제 style 속성으로 가져온 객체와 getComputedStyle() 메소드로 가져온 속성을 비교해보자.
예상대로 두 번째 엘리먼트의 style 속성으로는 background-color 스타일만 가져올 수 있었다.
하지만 getComputedStyle() 메소드를 이용하니, 해당 엘리먼트에 최종적으로 적용된 두 스타일 값을 모두 가져올 수 있는 것을 확인할 수 있었다.
💡그런데 getComputedStyle()로 가져온 색상 값이 왜 green, blue가 아니라 rgb(0,0,0) 형태의 값인가요?
=> HTML에서 색을 표현하는 방법이 3가지가 있다. 16진수의 HEX(ex. #FFF000), RGB, 그리고 140여 개의 표준 색이름을 이용하여 색을 적용할 수 있다. 그러나 실제로 브라우저에 색상을 적용할 때는 색이름이 아닌, 브라우저에 설정되어있는 색이름에 대응하는 HEX 또는 RGB 값을 이용해서 색을 적용하는 것이다.
따라서, element.style 속성으로 red, green 등 색이름으로 가져올 수 있는 이유는 실제로 브라우저에 적용된 색상 데이터가 아닌, 엘리먼트 노드 자체에 설정된 스타일 속성 데이터를 가져오는 것이므로 가능한 것이지만, getComputedStyle() 메소드는 실제로 브라우저에 적용된 최종 CSS 스타일 데이터를 가져오는 것이기 때문에, 색이름이 아니라 이 색이름에 대응된 실제로 적용된 RGB데이터를 가져오게 되는 것이다.그러면 '무조건 getComputedStyle() 메소드를 이용하면 되는 것이 아닐까', 'Style 속성은 어디에 써먹는 것일까'라는 의문이 들 수도 있다.
사실 이 두 가지에 대해서는 핵심적인 차이가 있다.Element.style 속성과 getComputedStyle() 메소드의 핵심 차이
Element.style 속성과 getComputedStyle()의 핵심 차이는 사용 목적에 있다.
getComputedStyle() 메소드에서 반환된 객체는 읽기 전용이며, 해당 엘리먼트의 스타일을 검사하는 데 사용할 수 있다.
따라서 getComputedStyle() 메소드를 이용하여 새로운 스타일 변경을 시도하면, 아래와 같이 에러가 발생하게 된다.
위 화면처럼 getComputedStyle() 메소드를 이용해서 글자색을 변경하려는 시도를 해보니 에러가 발생하는 것을 확인할 수 있다.
이와 달리, Element.style 속성은 해당 엘리먼트에게 새로운 스타일을 설정하는 데 사용하게 된다.
Element.style 속성을 통해, 해당 DOM 노드에 접근하여 직접적으로 스타일을 주입시키는 것이다.
두 번째 엘리먼트에게 Style 속성을 이용해서 글자 색을 새롭게 적용하니, 기존의 green 스타일 속성이 취소되고 새로운 파란 글자색이 적용된 것을 확인할 수 있다.
이 처럼 getComputedStyle() 메소드는 적용된 스타일을 확인하는 용도, Element.style 속성은 엘리먼트에게 새롭게 스타일을 설정하는 용도로 사용하면 된다.
반응형'개발 블로깅 > Javascript 개념' 카테고리의 다른 글
자바스크립트 메모리 관리(Garbage Collection)에 대해 알아보자 (0) 2020.09.04 Javascript Engine & Event Loop 동작 원리 (0) 2020.08.30 [2019.04.23] 자바스크립트 event Loop 개념 (0) 2019.04.23 [2019.04.08] __proto__, prototype, constructor 관계 (0) 2019.04.08 [2019.03.01]javascript에서 함수 선언에 따른 차이점. (0) 2019.03.01