[javascript] DOM 동적으로 CSS 추가하기
웹 애플리케이션을 개발하는 동안에는 때로는 DOM 요소에 동적으로 CSS를 추가해야 할 때가 있습니다. JavaScript를 사용하여 HTML 요소에 스타일을 적용하는 방법을 알아보겠습니다.
1. createElement 메서드를 사용하여 style 요소 생성하기
우선 JavaScript createElement 메서드를 사용하여 새로운 <style> 요소를 생성합니다.
const styleElement = document.createElement('style');
2. 스타일 내용 설정하기
이제 style 요소의 textContent 속성을 사용하여 스타일 내용을 설정합니다.
styleElement.textContent = `
.container {
background-color: #f4f4f4;
padding: 10px;
}
.button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
}
`;
3. head 요소에 style 요소 추가하기
마지막 단계로, head 요소에 새로 생성한 style 요소를 추가합니다.
document.head.appendChild(styleElement);
이제 JavaScript를 사용하여 동적으로 CSS를 추가할 수 있습니다. 동적으로 CSS를 추가함으로써 웹 애플리케이션의 유연성을 높일 수 있습니다.