JavaScript를 사용하면 classList.add() 메서드를 통해 HTML 요소에 클래스 이름을 손쉽게 추가할 수 있습니다. 이 방법은 기존에 적용된 클래스를 덮어쓰지 않고 새로운 클래스만 추가하기 때문에 매우 안전하고 널리 사용됩니다.
아래는 버튼을 클릭했을 때 특정 div 요소에 새로운 스타일 클래스를 적용하는 예제입니다.
예제
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.newStyle {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
width: 100%;
padding: 25px;
background-color: rgb(147, 80, 255);
color: white;
font-size: 25px;
box-sizing: border-box;
text-align: center;
}
</style>
</head>
<body>
<h1>JavaScript로 className 추가하기 예제</h1>
<button class="btn">여기를 클릭하세요</button>
<h2>위 버튼을 클릭하면 아래 div에 className이 추가됩니다</h2>
<div id="sampleDiv">
이것은 DIV 요소입니다.
</div>
<script>
document.querySelector(".btn").addEventListener("click", addClassName);
function addClassName() {
var element = document.getElementById("sampleDiv");
element.classList.add("newStyle");
}
</script>
</body>
</html>코드 설명
위 예제의 작동 원리를 단계별로 살펴보겠습니다.
1. 이벤트 등록: document.querySelector(".btn")으로 버튼 요소를 선택한 뒤, addEventListener("click", addClassName)을 통해 클릭 이벤트가 발생할 때 addClassName 함수가 실행되도록 설정합니다.
2. 요소 선택: document.getElementById("sampleDiv")를 사용해 id가 sampleDiv인 div 요소를 가져옵니다.
3. 클래스 추가: element.classList.add("newStyle")를 호출하면 해당 요소의 class 속성에 newStyle 클래스가 추가되어 CSS에 정의된 보라색 배경 스타일이 즉시 적용됩니다.
참고:classList.add()는 여러 개의 클래스를 한 번에 추가할 수도 있습니다. 예를 들어element.classList.add("classA", "classB")처럼 콤마로 구분하여 전달하면 됩니다. 또한 반대로 클래스를 제거할 때는classList.remove(), 토글할 때는classList.toggle()메서드를 활용할 수 있습니다.
실행 결과
위 코드를 실행하면 다음과 같은 초기 화면이 나타납니다.
'여기를 클릭하세요' 버튼을 클릭하면 div 요소에 newStyle 클래스가 추가되어 배경색과 글자 스타일이 변경됩니다.
