CSS クラス JavaScript を削除する
-
JavaScript で
classList.remove()を使用して要素から CSS クラスを削除する -
jQuery で jQuery
removeClass()を使用して要素から CSS クラスを削除する
このチュートリアルでは、JavaScript を使用して要素から CSS クラスを削除する方法を説明します。
JavaScript で classList.remove() を使用して要素から 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 で jQuery removeClass() を使用して要素から 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