[J.S_DOM] 4. 스타일 변경하기 (style, classList)

 

4.0 스타일 변경하기

웹페이지를 다루다 보면, 사용자의 클릭, 마우스 오버 같은 이벤트에 따라 요소의 디자인을 바꾸고 싶어질때가 있다. 

이때 자바 스크립트를 이용하면 HTML 요소의 스타일을 자유롭게 변경이 가능하다

 

이번 포스팅에선 이 두가지의 방식을 알아보도록 하자

 

4.1 .style 속성 - 개별 스타일을 직접 바꾸기

자바스크립트에서 DOM 요소에 직접 스타일을 적용시 .style 속성을 사용

인라인 스타일을 수정하는 방법으로 HTML 태그의 style 속성에 작접 작성하는 것과 같음

 

📌 문법

element.style.스타일속성명 = "값";

 

✅ 예시

<div id="myBox">변경될 박스</div>

<script>

  const box = document.getElementById("myBox");

  box.style.color = "red";                  // 글자색 빨간색

  box.style.backgroundColor = "lightblue";  // 배경색 연한 파랑

  box.style.padding = "10px";               // 안쪽 여백

</script>

 

📝 특징

• 직접 한땀 한땀 스타일을 지정 해야 함.
• 반복적이고 유지보수가 어려움
• 빠르게 특정 스타일을 바꾸고 싶을때 유용

 

4.2 classList 속성 - CSS 클래스 추가/제거

CSS 에서 스타일을 미리 만든 후 자바 스크립트에서 해당 클래스를 붙이거나 떼는 방식

이때 사용 하는 것이 classList 이다. 

 

📌 문법

element.classList.메서드("클래스이름");

 

🎨 자주 사용하는 메서드 정리

메서드	설명
add()	클래스 추가 (box.classList.add("on"))
remove()	클래스 제거 (box.classList.remove("on"))
toggle()	클래스가 있으면 제거, 없으면 추가 (box.classList.toggle("on"))
contains()	해당 클래스가 있는지 확인 (box.classList.contains("on"))
replace()	기존 클래스를 새로운 클래스로 교체 (box.classList.replace("old", "new"))

✅ 예시

<style>

  .highlight {

    background-color: yellow;

    font-weight: bold;

  }

</style>

<div id="notice">공지사항입니다</div>

<button onclick="highlightText()">강조</button>

<script>

  function highlightText() {

    const text = document.getElementById("notice");

    text.classList.add("highlight");

  }

</script>

 

📝 특징

• CSS 에서 스타일을 미리 정의 함
• 자바스크립트는 클래스의 이름만 호출
• 재사용이 쉽고 코드가 깔끔
• 유지 보수에 유리

⚖️ style vs classList 차이점 한눈에 보기

항목	.style	classList
적용 방식	요소에 직접 인라인 스타일 지정	CSS 클래스 추가/삭제를 통해 스타일 적용
코드 구조	스타일 속성 하나하나 개별 설정	클래스 이름만 제어
유지보수	불편하고 복잡해질 수 있음	쉽고 깔끔
재사용성	거의 없음	높음 (여러 요소에 동일한 클래스 사용 가능)
주요 사용 목적	동적으로 즉시 스타일 변경할 때	디자인 테마, 상태 변화 등 구조적 제어

 

❓ 언제 사용 해야 할까?

상황	추천 방법
한두 가지 스타일을 간단히 바꿀 때	.style
스타일이 복잡하고 재사용이 필요할 때	classList + CSS
여러 요소에 같은 스타일을 적용할 때	classList + CSS
마우스 오버, 클릭 등 상태에 따라 바꿀 때	classList.toggle()

 

 

스타일이 자주 바뀌지 않고 코드가 단순할 땐 .style이 빠르고 편함
스타일이 많거나 한 곳에서 디자인을 통제하고 싶다면 CSS + classList 사용 추천