웹 개발에서 DOM (Document Object Model)은 웹 페이지의 구조화된 표현을 제공하며, JavaScript를 사용하여 DOM에 접근하고 조작할 수 있다. DOM을 통해 HTML 요소의 스타일을 동적으로 변경할 수 있다. 이 글에서는 JavaScript를 사용하여 DOM 요소의 스타일을 변경하는 방법에 대해 알아보겠다.

1. 요소 선택하기

먼저, 스타일을 변경할 HTML 요소를 선택해야 한다. 이를 위해 document.querySelector나 document.getElementById와 같은 메서드를 사용하여 원하는 요소를 선택할 수 있다.

예시:

const element = document.querySelector('.my-element');

2. 스타일 변경하기

선택한 요소에 접근했다면, 이제 원하는 스타일을 변경할 수 있다. 요소의 style 속성을 사용하여 스타일을 동적으로 변경할 수 있다.

예시:

element.style.color = 'red';
element.style.fontSize = '20px';

3. 클래스 추가 및 제거

요소에 추가적인 스타일을 적용하려면 클래스를 추가하거나 제거할 수 있다. 요소의 classList 속성을 사용하여 클래스를 추가하거나 제거할 수 있다.

예시:

element.classList.add('highlight');
element.classList.remove('italic');

4. CSS 변수 활용

CSS의 변수를 사용하여 동적으로 스타일을 변경할 수도 있다. JavaScript를 통해 요소의 스타일 속성 값을 변경하면 CSS 변수에 할당된 값도 동적으로 업데이트된다.

예시:

element.style.setProperty('--main-color', 'red');

요약하자면, JavaScript를 사용하여 DOM의 스타일을 변경할 수 있는 다양한 방법이 있다. 이를 통해 사용자 상호작용에 맞춰 동적인 스타일 변경이 가능하며, 웹 애플리케이션의 사용자 경험을 향상시킬 수 있다.

참고 자료:

• MDN Web Docs: Document Object Model (DOM)
• MDN Web Docs: Element.style
• MDN Web Docs: Element.classList