CSS 클래스 JavaScript 제거
-
classList.remove()를 사용하여 JavaScript가있는 요소에서 CSS 클래스 제거 -
jQuery
removeClass()를 사용하여 jQuery를 사용하여 요소에서 CSS 클래스 제거
이 자습서에서는 JavaScript를 사용하여 요소에서 CSS 클래스를 제거하는 방법을 설명합니다.
classList.remove()를 사용하여 JavaScript가있는 요소에서 CSS 클래스 제거
classList속성은 요소에 적용된 클래스 목록을 반환합니다. 요소에 연결된 CSS 클래스를 추가, 제거 및 전환하는 데 도움이됩니다. classList에서 클래스를 추가 / 제거하는add()및remove()메소드를 제공합니다. remove()를 사용하여 모든 요소에서 CSS 클래스를 쉽게 제거 할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="delftstack">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="delftstack">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="delftstack">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
.delftstack {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
var div = document.getElementById('delftstack');
div.classList.remove('delftclass');
위 코드에서 우리는 선택기를 사용하여 DOM에서 원하는 요소를 가져온 다음 해당 속성에 액세스하고 수정할 수 있도록 변수에 저장했습니다. 요소에서 클래스를 제거하고 싶었으므로classList.remove()를 사용하여 원하는 클래스를 제거합니다. 여러 인수를 제공하여 동시에 여러 클래스 이름을 제거 할 수도 있습니다.
Internet Explorer는classList속성을 지원하지 않습니다.
jQuery removeClass()를 사용하여 jQuery를 사용하여 요소에서 CSS 클래스 제거
jQuery의removeClass()함수는 요소에서 클래스를 제거하는 유일한 목적입니다. 요소에서 단일, 다중 또는 모든 클래스를 제거 할 수 있습니다. 참조 된 요소에서 함수를 호출하여 클래스를 제거 할 수 있습니다. 모든 클래스를 한 번에 제거하려면 인수를 제공하지 않고removeClass()함수를 호출하십시오.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="delftstack">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="delftstack">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="delftstack">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
.delftstack {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
$('#removeme').removeClass('admin');
toggleClass()라는 또 다른 함수는 요소에서 클래스를 추가 / 제거하여 이미 존재하는 클래스는 제거되지만없는 클래스는 추가됩니다. 동일한 결과를 얻는 데 도움이되지만 잘못된 클래스 이름이 지정되면 새 클래스를 추가 할 수 있으므로주의해서 사용해야합니다.
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn