Javascript로 CSS 추가

Javscript로 동적으로 CSS추가가 필요할 경우 document.createElement("style") 을 통해 가능하다.

 

아래와같이 적용할 경우 버튼태그가 testBtn인경우(<button id="testBtn">) 빨간색 및 테두리가 생기는 CSS Style이

head태그쪽에 생성된다.

 

let testStyle = document.createElement("style")

let testBtn = `#testcss {
	border: solid;
    color : red;
}`

testStyle.appendChild(document.createTextNode(testBtn))
document.head.appendChild(testStyle)