-
[Javascript] element.style VS getComputedStylejavascript 2024. 3. 4. 14:13
프로젝트를 진행하던 중 엘리먼트의 padding-bottom값을 가져와야 하는 때가 있었는데
아래와 같이 찾으려 하자 이런 결과가 나왔다.
element.style.paddingBottom; // ""그래서 찾아보니 getComputedStyle을 이용하라 하여 둘의 차이점에 대해 정리하고자 글을 쓰게 되었다.
1. element.style
element.style은 우리가 inline으로 작성한 스타일 값을 가져오는 방법이다.
사용하는 방법은 아래와 같다.
const elemnet = document.getElementById("엘리먼트 ID"); // 알고자 하는 엘리먼트 노드 가져오기 const style = element.style; // 해당 엘리먼트에 적용된 스타일 가져오기그렇다면 실제로 적용해보자.
아래와 같이 "첫번째입니다."에는 글자 색상을 blue로 지정하고 "두번째입니다."에는 red로 지정했다.
<head> <style> #red { color: red; } </style> </head> <body> <div id="blue" style="color: blue;"> 첫번째입니다. </div> <div id="red"> 두번째입니다. </div> </body>element.style을 이용해 각 글자 색상을 가져와보자.
const firstElemnet = document.getElementById("blue"); // 첫번째 엘리먼트 const secondElemnet = document.getElementById("red"); // 두번째 엘리먼트 console.log(firstElemnet.stlye.color); // "blue" console.log(secondElemnet.stlye.color); // ""분명히 똑같은 메소드를 사용했지만 첫번째 엘리먼트의 글자 색상은 가져오고 두번째 엘리먼트의 글자 색상은 못 받아오는 걸 확인할 수 있다.
이유를 알아보자.
2. 엘리먼트의 속성
앞서 element.style은 우리가 inline으로 정의한 스타일을 가져오는 것이라고 했다.
inline으로 정의한 것은 엘리먼트의 속성과 같다.
또다른 엘리먼트 속성에 대해 알아보자.
<a id="link" class="link-area" href="https://chaeng03.tistory.com" style="margin: 20px;"> 코공기 블로그입니다. </a>우리가 흔히 사용하던 id, class, href, style 전부 엘리먼트 속성이다.
inline으로 정의되었기 때문이다.
그렇다면 아래와 같이 속성을 가져올 수 있겠다.
const linkElemnet = document.getElementById("link"); console.log(linkElemnet.id); // "link" console.log(linkElemnet.class); // "link-area" console.log(linkElemnet.href); // "https://chaeng03.tistory.com"이처럼 inline으로 정의된 엘리먼트 속성은 element.style을 통해 가져올 수 있지만
두번째 엘리먼트는 inline이 아닌 class를 통해 정의된 스타일이기에 글자 색상을 가져올 수 없는 것이다.
(2-1) 렌더링 과정
inline으로 정의되지 않았어도 class를 통해 스타일을 정의해줬으니 엘리먼트의 속성이 되어야 하는 건 아닌가 하는 의문이 든다.
이에 대한 의문은 렌더링 과정에 대해 이해하면 풀린다.
DOM 영역의 노드들이 브라우저에 그려질 때 외부에 선언된 스타일을 참조하여 브라우저에 그려지는 것일 뿐
외부에 선언된 스타일이 존재하지 않다면 해당 노드는 아무런 스타도 적용되지 않을 것이다.
그러나 inline으로 정의한 스타일은 노드 자체에 직접 정의해준 스타일이기에 엘리먼트의 속성이라고 할 수 있는 것이다.
그렇다면 두번째 엘리먼트의 스타일을 가져오려면 어떻게 해야 할까?
3. getComputedStyle
const secondElemnet = document.getElementById("red"); console.log(window.getComputedStlye(secondElemnet).color);getComputedStyle을 통해 두번째 엘리먼트의 글자 색상을 받아오는 걸 확인할 수 있다.
getComputedStyle은 인자로 전달받은 엘리먼트에 최종적으로 적용된 모든 css 속성 값을 담은 객체를 반환한다.
element.style로는 찾아올 수 없는 스타일을 getComputedStyle로는 가져올 수 있다면 getComputedStyle만 사용하면 되는 거 아닌가?
element.style은 언제 사용할까?
4. element.style VS getComputedStyle
둘의 차이점은 사용 목적에 있다.
getComputedStyle은 읽기 전용이고 element.style은
하는 데 사용하게 된다.
const secondElemnet = document.getElementById("red"); // 두번째 엘리먼트 secondElemnet.style.color = "blue";위와 같이 엘리먼트의 스타일을 변경하고 싶을 때 주로 사용하는 게 element.style이며
설정할 경우, inline으로 적용되게 된다.
getComputedStyle은 읽기 전용이니 당연하게도 스타일을 설정하고자 할 때 에러가 발생하게 된다.
핵심은 스타일을 가져오고 싶을 때에는 getComputedStyle,
스타일을 설정하고 싶을 때에는 element.style!
'javascript' 카테고리의 다른 글
[Javascript] 코딩 테스트에서 자주 사용되는 메소드 정리 (0) 2024.09.21 [javascript] Map VS Object_Map Object 차이점 (5) 2024.09.07 [Javascript] insertAdjacentHTML (0) 2023.01.30 [Javascript] JSDoc (0) 2022.10.26 [Javascript] 객체와 불변성(Immutability) (0) 2022.10.26