DOM 요소의 CSS 스타일 속성값 가져오기

자바스크립트로 DOM 요소의 CSS 스타일 속성값을 가져오는 방법에 대해 알아봅니다.

자바스크립트로 특정 요소의 CSS 스타일 속성값을 가져오는 방법은 다음의 두 가지로 나눌 수 있습니다.

  1. 브라우저가 계산한 최종 스타일 값 가져오기
  2. 인라인 스타일 값만 가져오기

브라우저가 계산한 최종 스타일 값 가져오기

이 방식은 웹 개발에서 가장 많이 사용되는 스타일 접근 방법 중 하나로, 요소의 현재 상태를 확인하거나 동적으로 스타일을 조작할 때 매우 유용합니다.

브라우저가 계산한 현재 요소의 최종 스타일 값을 가져오는 방법입니다.
요소는 여러 가지 방법으로 스타일을 지정할 수 있지만, 실제로 화면에 적용된 최종 스타일 값이 무엇인지 알아야 할 때 이 방법을 사용합니다.

이 방법은 window.getComputedStyle()과 getPropertyValue()를 통해 수행되며, "모든 스타일 규칙을 고려하여 최종적으로 계산된 스타일 값"을 반환합니다.

"모든 스타일 규칙을 고려하여 최종적으로 계산된 스타일 값"의 원리는
CSS 선택자의 구체성 값 – 스타일 우선순위를 정확히 이해하기를 참조하세요.

window.getComputedStyle()과 getPropertyValue()

window.getComputedStyle()는 웹 개발에서 매우 유용한 메서드로, 특정 HTML 요소에 적용된 모든 스타일 속성을 계산된 상태로 가져오는 데 사용됩니다. 이 메서드는 브라우저가 실제로 렌더링할 때 적용한 스타일 값을 반환합니다.

getPropertyValue()는 window.getComputedStyle()로 가져온 계산된 스타일 값들의 객체에서 매개변수로 원하는 속성을 지정하면 그 값을 문자열로 반환합니다.

기본 개념

window.getComputedStyle()은 특정 요소의 최종 계산된 스타일을 반환합니다.
이는 내부 스타일 시트, 인라인 스타일, 외부 스타일 시트 등 모든 스타일 규칙을 포함합니다.

HTML 
<style>
    p {
        font-size: 20px;
        background-color: red;
    }
</style>
<p id="my-element">p 요소입니다.</p>
JavaScript 
// 특정 계산된 스타일을 반환할 DOM 요소 객체를 가져옵니다.
const ele = document.getElementById("my-element");

// 특정 계산된 스타일 객체입니다.
const computedStyle = window.getComputedStyle(ele);

// getPropertyValue()로 특정 계산된 스타일 객체에서 "font-size"의 값을 가져옵니다.
let eleFontSize = computedStyle.getPropertyValue("font-size");
console.log(eleFontSize); // "20px"

코드 부연설명
getElementById() 함수는 HTML 문서 내에서 주어진 문자열과 값이 일치하는 id 속성을 가진 요소 객체를 반환합니다.

위 예제처럼 특정 요소의 최종 계산된 스타일은 window.getComputedStyle()로 가져오고, 가져온 스타일 객체에서 원하는 속성의 값은 getPropertyValue()를 통해 가져옵니다.

구문
JavaScript 
window.getComputedStyle(element)
window.getComputedStyle(element, pseudoElt)

getPropertyValue(property)
매개변수
window.getComputedStyle()의 매개변수
element 필수. 최종 계산된 스타일 값을 반환할 DOM 요소 객체입니다.
pseudoElt 옵션. 특정 가상 요소(pseudo-element)의 스타일을 가져오고자 할 때 사용합니다. 예를 들어, ::before 또는 ::after와 같은 의사 요소의 스타일을 조회할 수 있습니다. 이 매개변수를 생략하면 기본적으로 전체 요소의 스타일을 가져옵니다.
property 값을 확인할 속성 이름(CSS 속성 이름)을 나타내는 문자열입니다.
반환 값
  • window.getComputedStyle()은 요소의 계산된 스타일 객체(CSSStyleDeclaration 객체)를 반환합니다. 이 객체는 요소의 스타일이 변경되면 자동으로 업데이트됩니다.
  • getPropertyValue()는 속성 값을 포함하는 문자열을 반환합니다. 설정되어 있지 않은 속성의 값일 경우 빈 문자열("")을 반환합니다.

인라인 스타일 값만 가져오기

인라인 스타일 값은 요소의 HTML style 속성에 직접 설정된 스타일을 가져오는 방법입니다.

부연설명
style 속성으로 해당 요소에 직접 CSS 스타일을 지정할 수 있습니다.
이렇게 style 속성으로 직접 해당 요소에만 스타일링하는 것을 '인라인 스타일'이라고 합니다.

인라인 스타일은 다른 스타일 규칙보다 우선 적용되므로, 해당 요소에 대한 세부 스타일을 제어할 때 유용합니다

하지만, 인라인 스타일만 가져오는 것은 내부 스타일 시트나 외부 스타일 시트 로 설정된 스타일을 무시하기 때문에 제한적입니다.

element.style.propertyName

이 방법은 element.style.propertyName을 통해 수행됩니다.

기본 개념

element.style.propertyName은 해당 요소(element)의 인라인 속성(propertyName) 값을 반환합니다.

HTML 
<style>
    p {
        font-size: 20px;
    }
</style>
<p id="my-element" style="background-color: red;">p 요소입니다.</p>
JavaScript 
// 특정 계산된 스타일을 반환할 DOM 요소 객체를 가져옵니다.
const ele = document.getElementById("my-element");

// element.style.propertyName으로 인라인 스타일 값인 "background-color"의 값을 가져옵니다.
let eleBackgroundColor = ele.style.backgroundColor;
console.log(eleBackgroundColor); // "red"

// 인라인 스타일 값이 아닌 계산된 스타일 값은 가져올 수 없는 한계가 있습니다.
let eleFontSize = ele.style.fontSize;
console.log(eleFontSize); // ""
구문
JavaScript 
element.style.propertyName
매개변수
element.style.propertyName의 매개변수
element 인라인 스타일 값을 반환할 DOM 요소 객체입니다.
propertyName CSS 속성 이름입니다. 이 속성 이름은 하이픈(-)이 있을 경우에는 카멜 케이스(camelCase) 형식으로 작성해야 합니다. 예를 들어, 글자색을 지정하는 CSS의 color속성은 element.style.color로 지정하면 되지만 배경색을 지정하는 CSS의 background-color는 element.style.backgroundColor와 같이 카멜 케이스 형식으로 지정합니다.
반환 값

element.style.propertyName을 통해 가져온 스타일 값은 문자열 형식으로 반환합니다.
인라인으로 설정되어 있지 않은 속성의 값일 경우 빈 문자열("")을 반환합니다.

주의할 점

element.style.propertyName은 인라인 스타일을 설정하고 가져오는 간단하고 직관적인 방법입니다. 그러나 인라인 스타일에만 적용된다는 한계가 있습니다.

브라우저 호환성

자바스크립트로 요소의 CSS 스타일 속성값 가져오기의 브라우저 호환성
메서드와 속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
getComputedStyle() 11 12 3.5 5.1
getPropertyValue() 1 12 1 1
style.propertyName 1 12 1 3

참고문헌

같이 보기