JavaScript에서는 insertRule() 메서드를 사용해 스타일시트의 원하는 위치에 새로운 CSS 규칙을 동적으로 추가할 수 있으며, deleteRule() 메서드를 사용하면 특정 위치의 스타일 규칙을 삭제할 수 있습니다.
insertRule(rule, index)은 첫 번째 인자로 CSS 규칙 문자열을, 두 번째 인자로 삽입할 위치(인덱스)를 받습니다. deleteRule(index)은 삭제할 규칙의 인덱스를 인자로 받습니다. 아래 예제들을 통해 실제 사용 방법을 살펴보겠습니다.
예제 1: insertRule()로 새 규칙 추가하기
다음 예제에서는 id가 'custom'인 style 요소의 시트 객체에 접근하여, p 태그에 적용될 새로운 CSS 규칙을 인덱스 0 위치에 삽입합니다.
<!DOCTYPE html>
<html>
<head>
<style type="text/css" id="custom">
body {
background-color: silver;
}
</style>
</head>
<body>
<h1>Custom CSS!</h1>
<p>Woohoo!</p>
<script>
let newSheet = document.getElementById('custom').sheet
let cs = 'p {';
cs += 'margin: 4%;';
cs += 'padding: 2%;';
cs += 'font-size: 22px;';
cs += 'box-shadow: -10px 4px 0 chartreuse;';
cs += '}';
newSheet.insertRule(cs, 0);
</script>
</body>
</html>실행 결과
위 코드를 실행하면 p 요소에 여백, 패딩, 글꼴 크기, 차트리우스(chartreuse)색 박스 그림자가 적용된 것을 확인할 수 있습니다.
예제 2: deleteRule()과 insertRule() 함께 사용하기
이번 예제에서는 기존에 정의된 세 가지 규칙(div, p, h2) 중 인덱스 2에 있는 h2 규칙을 deleteRule()로 삭제한 뒤, 초록색 테두리가 적용된 새로운 h2 규칙을 insertRule()로 추가합니다.
<!DOCTYPE html>
<html>
<head>
<style type="text/css" id="demo">
div {
margin: 3%;
text-align: center;
background-color: powderblue;
}
p {
box-shadow: 0 0 12px rgba(0,0,0,0.6);
}
h2 {
color: red;
}
</style>
</head>
<body>
<div>
<h2>Custom CSS!</h2>
<p>Woohoo!</p>
</div>
<script>
let mySheet = document.getElementById('demo').sheet
let cs = 'h2 { border: 2px solid green; }'
mySheet.deleteRule(2);
mySheet.insertRule(cs, 0);
</script>
</body>
</html>실행 결과
위 코드를 실행하면 h2 요소에서 빨간색 글자 색상 규칙이 제거되고, 대신 초록색 2px 테두리가 적용된 것을 확인할 수 있습니다.
정리
insertRule()과 deleteRule()을 활용하면 페이지를 새로고침하지 않고도 런타임에 스타일시트를 유연하게 조작할 수 있습니다. 이 방식은 테마 변경, 동적 UI 스타일링 등 다양한 상황에서 유용하게 활용됩니다. 단, 인덱스 범위를 벗어난 값을 전달하면 오류가 발생하므로 규칙의 개수를 고려하여 사용하는 것이 좋습니다.