javascript style, css 여러개 처리

javascript 를 사용해 DOM Element  요소를 불러와 style 및 css 를 처리가 필요할때가 있다.

보통 한개의 css style 을 처리해야할 땐 아래와 같이 한다.

 

document.getElementById('styleId').style.display = 'none';
document.getElementById('styleId').style.color = 'red';

 

하지만 DOM Element 의 style 데이터가 여러개일 경우와 여러개를 변경 해야할 때가 있는데

이때 문자열을 사용하는 cssText() 를 사용한다.

 

cssText() 는 문자열을 사용해 불러온 Element 의 전체 스타일을 변경하기 때문에 주의해야 한다.

 

document.getElementById('id값').style.cssText = "바꿀 css 데이터";

 

예시 1)

아래와 같이 style 데이터가 "color: red; display: block;" 인 ul 태그가 있다.

console.log(document.getElementById("exceptiondayTime").style.cssText);

결과는 아래와 같다. 불러온 Element 의 style 요소 전체를 문자열 형태로 반환하는걸 볼 수 있다.

 

 

실제 사용 예시는 아래와 같다.

변경전 cssText 를 통해 전체 데이터를 불러오고 cssText 에 "color: blue" 값을 넣으면

아래와 같이 전체 style 데이터가 바뀌는걸 확인할 수 있다.

console.log(document.getElementById("exceptiondayTime").style.cssText);

document.getElementById("exceptiondayTime").style.cssText = "color: blue";

console.log(document.getElementById("exceptiondayTime").style.cssText);