[JS] 자바스크립트로 HTML 클래스 다루기(추가, 변경, 제거, 토글)

 

 

 

 

 

 

 

 

📌 자바스크립트에서 HTML 클래스 다루기

1. HTML 요소 선택
2. 클래스 변경
3. 클래스 추가
4. 클래스 제거
5. 클래스 토글
6. 클래스 존재 여부 확인

 

 

 

1️⃣ HTML 요소 선택

자바스크립트에서 HTML 요소를 선택하는 가장 쉬운 방법은 getElementById( )를 사용하는 것이다.

<div id="student" class="student-class1"></div>

<script language="javascript">
	let student = document.getElementById("student");
</script>

 

 

 

 

 

2️⃣ 클래스 추가

기존 클래스를 변경하지 않고 새 클래스를 추가하려면 +=연산자를 사용하여 추가할 수 있다.

<div id="student" class="student-class1"></div>

<script language="javascript">
	let student = document.getElementById("student");
	student.className += "student-class2";
</script>

<!-- 스크립트 결과 클래스가 아래와 같이 추가된다. -->
<div id="student" class="student-class1 student-class2"></div>

 

 

또는 classList.add를 사용하여 추가할 수도 있다.

<div id="student"></div>

<script language="javascript">
	let student = document.getElementById("student");
	student.classList.add(className);
	student.classList.add(className1, className2);
</script>

 

 

 

 

 

3️⃣ 클래스 변경

클래스를 변경하려면 className 속성을 사용하여 변경할 수 있다.

<div id="student" class="test"></div>

<script language="javascript">
	let student = document.getElementById("student");
	student.classname = "student-class1";
</script>

<!-- 스크립트 결과 클래스가 아래와 같이 변경된다. -->
<div id="student" class="student-class1"></div>

 

또는 classList.replace를 사용하여 변경 할 수도 있다.

<div id="student"></div>

<script language="javascript">
	let student = document.getElementById("student");
	student.classList.replace('변경전이름', '변경후이름');
</script>

 

 

 

 

 

4️⃣ 클래스 삭제

클래스 제거시 classList.remove를 사용하면 된다.

<div id="student" class="student-class1 student-class2"></div>

<script language="javascript">
	let student = document.getElementById("student");
	student.classList.remove('student-class1', 'student-class2');
</script>

<!-- 스크립트 결과 클래스가 아래와 같이 제거된다. -->
<div id="student"></div>

 

 

 

 

 

5️⃣ 클래스 토글

클래스 토글을 원할 때는 classList.toggle를 사용하면 된다.

해당 클래스가 존재하면 제거하고, 존재하지 않을 때는 클래스를 추가한다.

<div id="student" class="student-class1 student-class2"></div>

<script language="javascript">
	let student = document.getElementById("student");
	student.classList.toggle(className);
	student.classList.toggle(className, 조건문);
</script>

 

 

 

 

 

6️⃣ 클래스 존재여부 확인

클래스 존재여부 확인 시 classList.contains를 사용하면 된다.

<div id="student" class="student-class1 student-class2"></div>

<script language="javascript">
	let student = document.getElementById("student")	
	student.classList.contains(className);
</script>