JavaScript で CSS クラスを変更する
JavaScript 内で DOM 要素を操作するときはいつでも、HTML 要素に何らかの相互作用を提供する必要がある場合があります。たとえば、ユーザーがクリックしたときに要素の背景色を変更したり、要素を非表示にしたり、要素の外観を変更したりします。これは、ほとんどの場合、クラスを変更することで実行できます。
JavaScript 言語は、これらすべてを行うためのさまざまな方法を提供します。HTML 要素から CSS クラスを変更するために使用できるさまざまなメソッドを見てみましょう。
JavaScript で CSS クラスを変更するさまざまな方法
以下に、body タグ内の単一の div 要素で構成される HTML ドキュメントがあります。1つの ID と 2つのクラスを含む 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 は、それぞれクリムゾンとティールカラーの背景色のプロパティを持つ 2つのクラスです。dimensions と bg_1 は、body タグ内の HTML 要素に適用されます。
コードから、document.getElementById() メソッドを使用し、その要素 ID（この場合は dimensions）を文字列として渡すことにより、div 要素が myDiv 変数内に既に格納されていることがわかります。その中。
ここでの目的は、クラス 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() メソッドを使用することです。このメソッドは 2つの引数を取ります。1つ目は置換する要素（この場合は bg_1）にすでに存在する既存のクラスで、2つ目は要素に追加する新しいクラス（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