28. 자바스크립트로 CSS style 조작하기

안녕하세요. 박기린 입니다.

이전에 JS를 이용해서 HTML DOM을 조작하는 방법에 대해 알아봤습니다. (https://arnopark.tistory.com/506)

이 글에 덧붙여서 CSS style 까지 조작하는 방법을 알아보겠습니다.

 

 

HTML의 style Attribute

https://arnopark.tistory.com/506 페이지의 화면과 HTML 파일 

HTML과 CSS파일을 별도로 관리하지만, HTML의 style attribute를 이용해서 CSS Style을 적용할 수 있습니다.

바로 이 style attribute를 이용해서 JS로 DOM의 style에 접근할 수 있습니다.

---

 

 

style property와 할당 연산자(=)로 DOM Style 조작하기

https://arnopark.tistory.com/506 페이지의 화면과 HTML 파일 

임의로 'test' 클래스를 부여한 후, 조작을 가해보겠습니다.

 

 

 

document.querySelector()를 이용해서 조작할 DOM을 선택하는 것까지는 이전과 동일합니다.

(document.querySelector()를 잘 모르신다면, 'https://arnopark.tistory.com/506' 이 글을 읽고 오세요.)

 

그리고 style property를 사용합니다.

style property 다음으로는 CSS에서 사용했던 style 이름들을 적어줍니다.

 

 

 

 

위에서 background-color에 '#000'을 지정했더니, 검은색으로 도배가 된 모습을 확인할 수 있습니다.

---

 

 

style Object

- style property는 객체 형태입니다. style Object의 property 종류는 'https://www.w3schools.com/jsref/dom_obj_style.asp'를 보시면 됩니다.

- CSS에서는 두 개 이상의 단어일 경우 dash(-)를 사용했지만, JS에서는 camelCase가 원칙이므로, camelCase로 style을 지정합니다.

- px, rem 등의 값을 줄 때는 JS에서는 String 타입으로 값을 줍니다.

// 예시코드
document.querySelector('body').style.backgroundColor ='#60b347';
document.querySelector('.number').style.width = '30rem';