자바스크립트를 사용하면 동적으로 웹 페이지의 CSS 스타일을 조작할 수 있습니다. 이를 통해 사용자 인터랙션에 따라 스타일을 변경하거나 애니메이션을 추가할 수 있습니다.

1. style 속성 직접 조작

자바스크립트를 사용하여 엘리먼트의 style 속성을 직접 조작하는 방법입니다. 예를 들어, 아래와 같이 엘리먼트의 style 속성을 변경할 수 있습니다.

document.getElementById("myElement").style.color = "red";
document.getElementById("myElement").style.fontSize = "20px";

2. 클래스 추가 및 제거

엘리먼트에 클래스를 추가하거나 제거하여 스타일을 변경할 수도 있습니다. 예를 들어, 다음과 같이 클래스를 추가하거나 제거할 수 있습니다.

document.getElementById("myElement").classList.add("highlight");
document.getElementById("myElement").classList.remove("highlight");

3. CSS 속성 직접 조작

style 속성을 이용하여 직접 CSS 속성을 변경하는 방법 외에도, setProperty 메서드를 사용하여 CSS 속성을 동적으로 조작할 수 있습니다.

document.getElementById("myElement").style.setProperty("color", "blue");
document.getElementById("myElement").style.setProperty("font-size", "16px");

자바스크립트를 사용하여 CSS 스타일을 조작하는 것은 강력한 기능입니다. 그러나 너무 많은 스타일 변경은 성능에 영향을 줄 수 있으므로 신중하게 사용해야 합니다.

더 많은 정보를 원하시면 MDN web docs를 참고하십시오.