JS CSS STYLE, classList

CSS STYLE

document.querySelector("#container").style.textAlign = "center";
document.querySelector("img").style.width = "150px";
document.querySelector("img").style.borderRadius = "50%"

위와 같이 querySelector로 id나 tag class등을 잡고 .style.textAlign등을 사용해 css를 줄 수 있다.

하지만 css와 다른점은 css는 text-align 이며 border-radius 이지만 JS는 인라인 - 을 사용하지 않고

모두 카멜케이스를 사용한다. 또한 주는 값도 모두 string 처리를 해야 한다. 

window.getComputedStyle(h1).color
window.getComputedStyle(h1).fontSize

개발자 모드에 해당 값을 코드를 사용함으로써 h1에 사용된 색상이나 폰트사이즈의 값을 쉽게 알아낸다.

 

CLASSLIST

h2.classList.add('purple')
h2.classList.remove('purple')
h2.classList.toggle('purple')

add는 class를 추가하고 remove는 삭제한다.

toggle의 기능은 해당 toggle이 실행되면 true값을 출력하고 한번 더 실행하면 false값을 실행하는 

on off 가 가능한 기능이다.