요소에 적용된 스타일을 읽어오는 방법 : Element.style 속성과 getComputedStyle() 메소드의 차이

브라우저에 렌더링된 요소의 스타일을 읽어오는 방법에는 두 가지가 있습니다.

• Element.style 속성 참조
• getComputedStyle() 메소드

 

오늘은 엘리먼트 스타일에 접근하는 위 각 방법의 차이에 관해 포스팅하고자 합니다.

 

# 각기 다른 방식으로 적용된 엘리먼트 

첫번째 요소는 인라인 방식,  두번째 요소는 인터널 방식으로 각기 스타일을 적용한 모습입니다.

이제 js로 두 요소에 각기 적용된 스타일 값을 가져와보겠습니다.

# 첫번째 요소의 스타일 값 가져오기 

첫번째 요소의 노드 데이터를 가져와서 style 속성을 참조해보니, green 색상의 스타일 속성을 잘 가져올 수 있었습니다. 

과연 두 번째 요소도 동일한 방식으로 스타일 값을 가져올 수 있을까요?

 

# 두번째 요소의 스타일 값 가져오기 

두번째 요소의 스타일 값을 가져오려하니, 아무것도 적용되지 않은 상태의 빈 데이터가 반홥니다.

하지만 브라우저에는 이미 해당 스타일이 적용된 모습인 것을 확인할 수 있는데요.

 

왜 이런 현상이 발생하는 것일까? 

 

원인

우선 엘리먼트의 속성에 대해 파헤쳐볼 필요가 있습니다.

일반적으로 엘리먼트 속성이라 함은, 태그 내의 인라인으로 정의된 것을 말합니다.

아래의 a 태그를 예시로 들어볼 수 있겠습니다. 

위 a태그의 엘리먼트 속성으로 id, href, style 을 가지고 있습니다. 

그리고 자바스크립트에서는 아래처럼 해당되는 속성 데이터를 가지고 올 수 있습니다.

 

# <a>태그의 속성 확인하기

위와 같이 인라인 방식으로 스타일이 정의되어 해당 노드 자체에 스타일 속성으로 스타일이 적용되었으므로

style 키워드만으로 스타일값을 가져올 수 있는 것입니다.

앞서 확인한 첫번째 요소 경우 해당 노드에만 스타일이 적용되어 적용된 색상값인 green을 반환해올 수 있었습니다.

하지만 두 번째 요소의 경우 인터널 방식으로 정의하여, 태그 자체에다 직접 속성으로 정의하지 않았습니다.

따라서 두번째 요소를 살펴보면, 첫번째 요소와는 다르게 속성 자체에는 아무런 적용 사항이 없는 것을 확인할 수 있습니다.

다만 'second-ele' 라는 해당 클래스를 가진 엘리먼트에게 어떤 스타일을 적용할 것인지만 선언되었을 뿐입니다.

그래서 자바스크립트로 두번째 요소의 데이터를 가져와서 해당 요소의 style 속성을 참조해보면 아무것도 없는 빈 데이터가 반환되는 것이죠.

💡그래도 결국 아이디를 통해 스타일을 가지게 되었으니, 결국 해당 엘리먼트의 속성이 아닌가요?

=> 이는 DOM 영역의 노드들이 브라우저에 그려질 때, 외부에 선언된 스타일을 참조하여 브라우저에 그려지는 것이지, 실제로 DOM 영역의 해당 노드들에게 속성으로 적용하는 것이 아니기 때문이다. 그래서 style 키워드는 해당 DOM의 노드를 직접 가져오는 것이기 때문에, 브라우저에는 스타일이 적용된 채로 그려지지만 노드 자체에는 스타일 값이 없는 것이다.

 

그렇다면 이렇게 외부 선언된 요소의 스타일을 가져오기 위해선 어떻게 해야할까?

 

#자바스크립트에서 외부 선언된 엘리먼트의 스타일 값 가져오기

이런때 우리는 브라우저에서 제공하는 getComputedStyle() 메소드를 이용해볼 수 있습니다.

style 속성으로는 가져오지 못했던 두 번째 요소의 스타일값을 getComputedStyle() 메소드에서는 가져올 수 있는 것을 확인할 수 있습니다. 

과연 이 메소드의 정체가 뭐길래 이런 게 가능한 것일까요?

 

 getComputedStyle() 메소드

---

인자로 전달받은 엘리먼트에 최종적으로 적용된 모든 CSS속성 값을 담은 객체를 반환한다.

관련해서 아래 예시를 살펴보겠습니다. 

역시나 예상대로 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() 메서드를 이용하여 새로운 스타일 변경을 시도하면, 아래와 같이 에러가 발생하게 되는 것이죠.

하지만 이와는 달리, Element.style 속성은 해당 엘리먼트에게 새로운 스타일을 설정하는 데 사용할 수 있습니다.

Element.style 속성을 통해, 해당 DOM 노드에 접근하여 직접적으로 스타일을 주입시키는 것이죠.

두번째 요소에 적용된 style 속성을 이용해서 배경색을 purple -> green 으로 변경하려고 시도하니,

기존에 적용된 purple 배경 스타일 속성이 취소되고 green 배경 스타일이 적용된 것을 확인할 수 있습니다. 

 

결론

getComputedStyle() 메소드는 요소에 적용된 스타일을 확인하는 용도, Element.style 속성은 요소에 새롭게 스타일을 설정하는 용도로 사용하면 됩니다.  

 

*이해에 도움이 됐던 자료 출처 : 

https://ko.javascript.info/styles-and-classes

https://helloinyong.tistory.com/284