JavaScript로 웹 페이지를 개발하다 보면 런타임 중에 동적으로 새로운 CSS 스타일 규칙을 추가해야 하는 경우가 종종 있습니다. 이럴 때 insertRule() 메서드와 sheet 객체를 함께 사용하면 간단하게 해결할 수 있습니다.
insertRule() 메서드란?
insertRule()은 CSSStyleSheet 인터페이스의 메서드로, 기존 스타일시트에 새로운 CSS 규칙을 삽입하는 역할을 합니다. 먼저 document.createElement("style")로 style 요소를 생성한 후 head에 추가하고, 해당 스타일시트에 원하는 규칙을 삽입하는 방식으로 사용합니다.
예제 코드
다음은 id가 "demo"인 div 요소의 배경색을 빨간색으로 변경하는 새로운 CSS 규칙을 JavaScript로 동적으로 삽입하는 전체 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<div id="demo">
This is a JavaScript program
</div>
</body>
<script>
var creatingStyle = document.createElement("style");
document.head.appendChild(creatingStyle);
creatingStyle.sheet.insertRule(`#demo{
background-color: red;
}`);
</script>
</html>코드 설명
위 코드의 핵심 로직은 다음과 같이 세 단계로 구성됩니다.
1. createElement("style"): 새로운 style 요소를 생성합니다.
2. appendChild(): 생성한 style 요소를 문서의 head에 추가하여 실제 스타일시트로 등록합니다.
3. insertRule(): 템플릿 리터럴로 작성한 CSS 규칙(#demo 선택자에 배경색 red 적용)을 스타일시트에 삽입합니다.
실행 방법
위 프로그램을 실행하려면 파일 이름을 "anyName.html" 또는 "index.html"로 저장한 뒤, VSCode 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 "Open with Live Server" 옵션을 선택하면 됩니다. Live Server 확장 프로그램이 설치되어 있지 않다면 VSCode 확장 마켓플레이스에서 검색하여 설치할 수 있습니다.
출력 결과
코드를 실행하면 브라우저 화면에 다음과 같은 결과가 나타납니다. 페이지가 로드되는 순간 JavaScript가 실행되어 새로운 CSS 규칙이 적용되고, "This is a JavaScript program"이라는 텍스트가 포함된 demo 영역의 배경색이 빨간색으로 변경된 것을 확인할 수 있습니다.
