JS로 CSS 스타일 값 다루기

이때까지 JS로 CSS 속성값을 가져올 일이 딱히 없어서 몰랐는데

현재 element의 CSS 속성값을 가져오려고 할 때 style property를 사용하면 올바르게 동작하지 않는다.

// 요렇게 하면 안된다.
const buttonDisplay = document.querySelector('#example').style.display;

이 style 이라는 property는 해당 element의 'inline CSS'를 의미한다.

근데 <style> 태그에서 적용한 CSS나, 외부 파일로 적용한 CSS랑 inline CSS는 따로 동작하는 것 같더라.

function toggleButton() {
    const button = document.querySelector('#example');
    if(button.style.display === 'none') {
    	button.style.display = 'block';
    } else {
    	button.style.display = 'none';
    }
}

대충 이런 식의 코드였는데, 올바르게 작동하지가 않았다.

 

그래서 알아보니, CSS 속성 값을 가져올 때는 'getComputedStyle()'이라는 메서드를 사용해야 하더라.

참고로, getComputedStyle은 read-only 속성을 가지기 때문에 CSS 속성값을 가져올 때만 사용한다.

CSS 속성 값을 update하고 싶다면, 그냥 style 속성 사용해주면 된다.

대충, 다음과 같이 사용한다.

function toggleButton() {
    const button = document.querySelector('#example');
    if(getComputedStyle(button).display === 'none') {
    	button.style.display = 'block';
    } else {
    	button.style.display = 'none';
    }
}

추가로, pseudo element의 CSS 속성 값을 가져오는 것도 가능하다.

pseudoElementStyle = getComputedStyle(element, '::before')

 

정리

1. CSS 속성을 read 하고 싶다면 getComputedStyle()

2. CSS 속성을 update 하고 싶다면 style

 

참고

How to get CSS values in JavaScript | Zell Liew

---

한 가지 방법이 더 있었다.

바로 setProperty(), getPropertyValue(), item(), removeProperty() 메서드를 사용하는 것.

- setProperty() : style 값 설정하기

- getPropertyValue() : style 값 가져오기

- item() : style값 가져오기, 인자로 index를 사용

- removeProperty() : style 값 삭제하기

// 설정(set) 
document.body.style.setProperty('color', 'lime'); 
document.body.style.setProperty('font-size', '16px'); // - 를 사용한것에 주목! 

// 읽기(get) 
document.body.style.getPropertyValue('color'); // 'lime' 

// item() 이용, 인자값은 인덱스 숫자 
document.body.style.item(0) // 'color' 
document.body.style.item(1) // 'font-size' 

// 제거(remove), 제거 후에는 빈 문자열을 반환한다. 
document.body.style.removeProperty('color') // 'lime' 
document.body.style.item(1) // ''

// 출처: https://ibrahimovic.tistory.com/56

style에서 사용하던 것처럼 fontSize가 아니라, font-size임에 주의.

 

이 방법을 사용하면, 해당 style 속성의 우선순위(!important)를 제어하는 것도 가능하다.

box.style.setProperty('font-family', 'Georgia, serif', 'important'); 
box.style.setProperty('font-size', '1.5em'); 

box.style.getPropertyPriority('font-family'); // important 
box.style.getPropertyPriority('font-size'); // ""

동일한 setProperty() 메서드의 세 번째 인자로 'important'를 전달했다.

이렇게 하면 해당 속성에 '!important'를 부여하는 효과를 가지게 된다.

물론 세 번째 인자는 생략이 가능하며, 빈 문자열이나 undefined를 전달하는 방법도 있다.

속성의 우선순위를 확인하려면 getPropertyPriority() 메서드를 사용해주면 된다.

 

축약형을 사용하면 거기에 포함된 속성들은 전부 동일한 값을 반환한다는 점에 유의.

<div class="box" style="border: solid 1px red !important;">

// 모두 "important" 를 반환한다. 
box.style.getPropertyPriority('border')); 
box.style.getPropertyPriority('border-top-width')); 
box.style.getPropertyPriority('border-bottom-width')); 
box.style.getPropertyPriority('border-color')); 
box.style.getPropertyPriority('border-style'));

 

참고

Javascript로 CSS 제어하기(1) - CSSOM : CSS Object Model

두 번째 참고는, JS로 CSS의 media query나 keyframe 등을 제어하는 방법에 관한 글.

Javascript로 CSS 제어하기(2) - CSSOM : CSS Object Model