JS에서 여러 CSS 스타일 한꺼번에 적용하는 방법: style.cssText

 

JS로 요소에 개별 스타일 속성을 지정해주느라 진땀뺐던 사람들을 위한 희소식!

전체 스타일 설정을 위한 cssText 프로퍼티에 관해 다뤄볼까 합니다. 

 

cssText

---

- 여러 css 스타일을 한번에 지정해줘야 할 때 사용되는 전체스타일 설정 프로퍼티

※ 단, 기존 스타일에 스타일을 추가하는 게 아닌 전체를 교체해버리기 때문에 주의 필요

-> 요소를 새로 만들고 여기에 스타일을 적용할때는 기존 스타일이 없기 때문에 사용 가능!

 

cssText 를 몰랐을 때는...

ele.style.margin: "15px",

ele.style.color: "red",

ele.style.fontSize: "20px"

ele.style.backgroundColor: "aqua"

.

.

등등등 

개별 스타일을 일일히 지정해줘야 하는 번거로움이 있었는데요..

 

cssText 프로퍼티를 사용하면 아래와 같이 반복되는 코드없이(ele.style) 스타일을 지정해줄 수 있어서 편리합니다.

 ele.style.cssText = `

transform: translateY(-5px),

color: red,

width: 100px

 

* 이해에 도움이 됐던 자료 출처 : https://ko.javascript.info/styles-and-classes