JavaScript에서 CSS 클래스 변경
JavaScript 내부의 DOM 요소로 작업할 때마다 HTML 요소에 일부 상호 작용을 제공해야 하는 경우와 상황이 있습니다. 예를 들어 사용자가 클릭할 때 요소의 배경색을 변경하거나 요소를 숨기거나 요소의 모양을 수정하는 등의 작업을 수행할 수 있습니다. 이는 대부분 클래스를 변경하여 수행할 수 있습니다.
JavaScript 언어는 이 모든 작업을 수행하는 다양한 방법을 제공합니다. HTML 요소에서 CSS 클래스를 변경할 수 있는 다양한 방법을 살펴보겠습니다.
JavaScript에서 CSS 클래스를 변경하는 다양한 방법
아래에는 body 태그 안에 단일 div 요소로 구성된 HTML 문서가 있습니다. 하나의 id와 두 개의 클래스를 포함하는 style 태그도 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
#dimensions{
width: 500px;
height: 500px;
}
.bg_1{
background-color: crimson;
}
.bg_2{
background-color: teal;
}
</style>
</head>
<body>
<div id="dimensions" class="dimensions bg_1">
<script>
let myDiv = document.getElementById('dimensions');
myDiv.addEventListener("click", function(e) {
});
</script>
</body>
</html>
dimensions이라는 이름의 id에는 너비와 높이가 포함됩니다. bg_1 및 bg_2는 각각 crimson 및 teal 색상과 함께 background-color 속성을 갖는 두 가지 클래스입니다. dimensions 및 bg_1은 body 태그 내부의 HTML 요소에 적용됩니다.
코드에서 document.getElementById() 메서드를 사용하고 해당 요소 id(이 경우 dimensions)를 문자열로 전달하여 myDiv 변수 안에 div 요소를 이미 저장했음을 알 수 있습니다. 이것 안에.
여기서 우리의 목표는 bg_1 클래스를 bg_2로 변경하여 div 요소의 배경색을 진홍색에서 청록색으로 변경하는 것입니다. 이것은 사용자가 div 요소에 있을 때만 수행됩니다. 이를 위해 JavaScript 내부의 myDiv 변수에 addEventListener() 메서드를 사용하여 onClick 이벤트도 추가했습니다.
이를 달성하기 위해 아래와 같이 다양한 방법을 따를 것입니다. 아래에 작성할 모든 코드는 script 태그 아래 addEventListener() 메소드 내부로 이동합니다.
className 메서드 사용
JavaScript에서 CSS 클래스를 변경하는 가장 쉬운 방법은 className 메서드를 사용하는 것입니다. 이 방법을 사용하면 HTML 요소에 이미 있는 기존 클래스를 다른 클래스로 바꿀 수 있습니다. 공백으로 구분된 문자열로 추가하려는 모든 새 클래스를 지정할 수 있습니다.
myDiv.className = 'bg_2';
이것은 요소에 있는 모든 기존 클래스를 새 클래스로 대체합니다.
classList.remove 및 classList.add 메소드 사용
HTML 요소에 있는 모든 클래스는 classList 메소드를 사용하여 액세스할 수 있습니다. classList.remove를 사용하여 특정 클래스를 제거할 수 있고 classList.add를 사용하여 요소에 새 클래스를 추가할 수 있습니다. 이 예에서는 먼저 classList.remove를 사용하여 bg_1 클래스를 제거한 다음 아래와 같이 classList.add를 사용하여 bg_2라는 새 클래스를 추가합니다.
myDiv.classList.remove("bg_1");
myDiv.classList.add("bg_2");
이것이 이러한 방법을 사용하여 CSS 클래스를 변경하는 방법입니다.
classList.replace() 메서드 사용
CSS 클래스를 변경하는 또 다른 방법은 classList.replace() 메서드를 사용하는 것입니다. 이 메서드는 두 개의 인수를 사용합니다. 첫 번째는 교체하려는 요소에 이미 존재하는 기존 클래스(이 경우 bg_1)이고 두 번째는 요소에 추가하려는 새 클래스입니다(In 이 경우 bg_2).
myDiv.classList.replace('bg_1', 'bg_2');
다음은 JavaScript에서 CSS 클래스를 변경할 수 있는 몇 가지 방법입니다.
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn