javascript로 요소에 적용된 css 스타일 가져오기

# javascript로 요소에 적용된 css 스타일 가져오기

javascript로 css 스타일을 가져오는 방법은 2가지가 있습니다.

1. 인라인으로 적용된 스타일 가져오기
2. 최종적으로 계산된 모든 스타일 가져오기

## 인라인 스타일 가져오기

인라인 스타일은 html 요소에 적용한 스타일입니다.

<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() 을 사용합니다.
• getComputedStyle()는 읽기 전용입니다. css값을 설정할 수 없습니다.
• getComputedStyle()에서는 상대 단위인 em, rem 단위가 아닌 px 단위로 값을 얻습니다.

const style = getComputedStyle(Element, pseudoElement)

pseudoElement는 의사 요소를 의미합니다.(예: '::before') 이 값은 생략할 수 있습니다.

 

예시 코드

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

.element {
  background-color: red;
}

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

 

아래처럼 모든 css속성과 해당 값이 포함된 개체가 표시됩니다.

getComputedStyle 값 출력

 

크롬 개발도구에서도 해당 객체를 확인할 수 있습니다.

크롬 개발자도구 Computed에서도 확인 가능.

 

## 마무리

• 두 가지 방법을 사용하여 javascript에서 css 값을 얻을 수 있습니다.

1. element.style
2. getComputedStyle(element, pseudoElement)

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

 

참고

https://xii-xvi.tistory.com/4

https://zellwk.com/blog/css-values-in-js/