JavaScript로 CSS 스타일 변경하기

 

 

안녕하세요! 오늘은 JavaScript에서 CSS를 변경하는 방법에 대해 배운 내용을 정리해보겠습니다.
JavaScript를 사용하면 특정 HTML 요소의 스타일을 동적으로 변경할 수 있습니다.
특히, 이벤트 리스너(Event Listener) 와 함께 사용하면 사용자의 동작에 반응하는 인터랙티브한 웹페이지를 만들 수 있습니다.

---

1. JavaScript로 CSS 변경하는 방법

JavaScript에서 CSS 스타일을 변경하는 가장 기본적인 방법은 element.style.property 를 사용하는 것입니다.

📌 기본 문법

element.style.속성명 = "값";

예를 들어, 특정 요소의 글자 색상을 변경하려면 다음과 같이 작성할 수 있습니다.

element.style.color = "blue";

---

2. 클릭할 때마다 색상이 바뀌는 예제

HTML의 특정 요소를 클릭할 때마다 글자 색상이 변경되도록 만들어보겠습니다.

🔹 HTML 코드

<div class="hello">
    <h1>Click me!</h1>
</div>

🔹 JavaScript 코드

const h1 = document.querySelector("div.hello:first-child h1");

function handleMouseEnter() {
    const currentColor = h1.style.color;
    let newColor;
    if (currentColor === "blue") {
        newColor = "tomato";
    } else {
        newColor = "blue";
    }
    h1.style.color = newColor;
}

h1.addEventListener("click", handleMouseEnter);

실행 결과

• 초기 상태: <h1>의 색상은 기본값(검정색)
• **클릭하면 색상이 ****blue**로 변경됨
• **다시 클릭하면 ****tomato**로 변경됨 (색상이 계속 토글됨)

---

3. classList를 활용한 스타일 변경

CSS 스타일을 변경하는 또 다른 방법은 classList.toggle() 을 사용하는 것입니다. 이 방법을 활용하면 CSS 파일에서 스타일을 정의한 후 JavaScript에서 클래스만 추가/제거하여 스타일을 변경할 수 있습니다.

🔹 CSS 코드

.active {
    color: blue;
}

🔹 JavaScript 코드

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick() {
    h1.classList.toggle("active");
}

h1.addEventListener("click", handleTitleClick);

실행 결과

• 클릭하면 active 클래스가 추가되면서 색상이 파란색으로 변경됨
• 다시 클릭하면 active 클래스가 제거되면서 원래 색상으로 돌아감

💡 classList.toggle()의 장점

✅ 여러 스타일을 한 번에 변경할 수 있다.
✅ style.color보다 유지보수가 쉽다.
✅ CSS에서 스타일을 관리하므로 코드가 깔끔해진다.

---

오늘 배운 내용을 정리하면:

✅ element.style.property를 사용하면 JavaScript에서 개별 스타일을 변경할 수 있다.
✅ classList.toggle()을 사용하면 미리 정의한 CSS 클래스를 추가/제거하여 스타일을 변경할 수 있다.
✅ addEventListener()를 활용하면 클릭, 마우스 오버 등의 이벤트에 따라 동적으로 스타일을 변경할 수 있다.