JavaScript에서 CSS 값을 얻는 방법

때때로 CSS만으로는 충분하지 않습니다. JavaScript로 CSS 값을 제어해야 할 수도 있습니다. 그러나 JavaScript에서 CSS 값을 어떻게 얻습니까?

인라인 스타일 또는 계산된 스타일을 가져오려는지에 따라 두 가지 가능한 방법이 있습니다.

인라인 스타일 가져오기

인라인 스타일은 HTML의 style 속성에 있는 스타일입니다.

<div class="element" style="font-size: 2em; color: red;">Red hot chili pepper!</div>

인라인 스타일을 가져오려면 style 속성을 사용할 수 있습니다.

const element = document.querySelector('.element');

const fontSize = element.style.fontSize;
console.log(fontSize); // 2em

const color = element.style.color;
console.log(color); // red

계산된 스타일 가져오기

스타일이 CSS 파일에 작성된 경우 계산된 스타일을 가져와야 합니다. 이렇게 하려면 getComputedStyle 를 사용할 수 있습니다.

두 가지 값을 취합니다.

const style = getComputedStyle(Element, pseudoElement);

Element 여기서는 querySelector로 선택한 요소를 나타냅니다.
pseudoElement 여기서는 가져오려는 의사 요소(있는 경우)의 문자열을 나타냅니다. 의사 요소를 선택하지 않는 경우 이 값을 생략할 수 있습니다.

이해를 돕기 위해 예제를 살펴보겠습니다. 다음 HTML 및 CSS가 있다고 가정합니다.

<div class="element"> This is my element </div>

.element {
  background-color: red;
}

먼저 querySelector 가 있는 요소를 선택해야 합니다. 그런 다음 getComputedStyle를 사용하여 요소의 스타일을 가져옵니다.

const element = document.querySelector('.element');
const style = getComputedStyle(element);

로그하면style 모든 CSS 속성과 해당 값이 포함된 개체가 표시되어야 합니다.

getComputedStyle는 모든 CSS 속성과 해당 값을 포함하는 객체를 반환합니다.


Chrome 및 Firefox의 개발 도구에서도 이 개체를 볼 수 있습니다.

Firefox 개발 도구의 경우 "Inspector", "Computed"아래를 보십시오.

Firefox 개발 도구 계산 탭


Chrome 개발 도구의 경우 "요소"아래를 확인하십시오. 개발 도구 창이 크면 오른쪽 패널에서 계산된 스타일을 볼 수 있습니다. 개발 도구 창이 작은 경우 "Computed"탭 아래에서 볼 수 있습니다.

Chrome 개발 도구 계산 탭


CSS 속성 값을 가져오려면 속성을 카멜 케이스로 작성합니다.

const style = getComputedStyle(element);

const backgroundColor = style.backgroundColor;
console.log(backgroundColor); // rgb(0, 0, 0)

참고: getComputedStyle는 읽기 전용입니다. getComputedStyle로 CSS 값을 설정할 수 없습니다.

참고 2: getComputedStyle는 계산된 CSS 값을 가져옵니다. px 및 getComputedStyle 와 같은 상대 단위가 아니라 em 에서 rem 를 얻습니다.

의사 요소에서 스타일 가져오기

의사 요소에서 스타일을 가져오려면 의사 요소의 문자열을 getComputedStyle 의 두 번째 인수로 전달해야 합니다.

<div class="element"> This is my element </div>

.element {
  background-color: red;
}
.element::before {
  content: 'Before pseudo element';
}

const element = document.querySelector('.element');
pseudoElementStyle = getComputedStyle(element, '::before');

console.log(pseudoElementStyle.content); // Before pseudo element

마무리

다음 두 가지 방법을 통해 JavaScript에서 CSS 값을 가져올 수 있습니다.

style 속성

getComputedStyle .

style 속성은 인라인 CSS 값만 검색하는 반면 getComputedStyle 스타일은 계산된 CSS 값을 검색합니다.

이 강의가 도움이 되었다면 Learn JavaScript 을(를) 즐길 수 있습니다. 여기에서 원하는 것은 무엇이든 처음부터 빌드하는 방법을 배울 수 있습니다. Learn JavaScript 등록은 2018년 7월(다음 주!)에 시작됩니다.


읽어 주셔서 감사합니다. 이 기사는 원래 my blog에 게시되었습니다. 더 나은 프런트엔드 개발자가 되는 데 도움이 되는 더 많은 기사를 보려면 my newsletter에 가입하세요.