JavaScript で HTML 要素のクラスを変更する
- JavaScript で HTML 要素を選択する
- JavaScript の要素に適用可能なすべてのクラスを変更する
- JavaScript で要素に追加のクラスを挿入する
- JavaScript で要素のクラスを削除する
- JavaScript の要素でクラスが使用されているかどうかを確認する
この記事では、JavaScript イベントに応答して HTML 要素のクラスを変更する方法を示します。
JavaScript で HTML 要素を選択する
間違いなく、JavaScript で HTML 要素を選択する最も簡単な方法は、document.getElementById() を使用することです。
たとえば、クラス ID が Students の要素を選択する必要がある場合、その要素を選択する方法は次のとおりです。
document.getElementById('Students')
JavaScript の要素に適用可能なすべてのクラスを変更する
クラス ID を使用して要素を選択した後、上記のように、クラスを変更するか、すべてのクラスを置き換えることができます。以下に示すように、古いクラスを置き換えるには、.className 属性を使用して新しいクラスを設定する必要があります。
Document.getElementById('Fruits').classname = 'Veggies';
JavaScript で要素に追加のクラスを挿入する
既存のクラスを変更せずに、要素に新しいクラスを追加することもできます。これを行うには、+= 演算子を使用して新しいクラスを追加します。
例えば、
Document.getElementById('Subjects').className += 'Physics';
これは、Physics という名前の追加クラスを Subjects 要素の他のクラスに追加します。
JavaScript で要素のクラスを削除する
他のクラスに影響を与えずに要素内の単一のクラスを削除することは、少し複雑です。.className.replace を次の正規表現と一緒に使用する必要があります。
?:^|\s)RemoveThis(?!\S)/g
?:^|\sは、文字列の先頭および/または使用されている単一の空白文字をキャプチャします。RemoveThisは、削除するクラスの名前です。(?!\S)は、RemoveThisが完全なクラス名であることを確認し、最後にスペース以外の文字がないかチェックします。つまり、正規表現が文字列の最後に配置されるようにします。gは、クラスが追加されたすべての場合に、必要に応じて置換コマンドが実行されることを保証するフラグです。
以下の例を参照してください。
document.getElementById('ElementOne').className =
document.getElementById('ElementOne')
.className.replace(/(?:^|\s)RemoveThis(?!\S)/g, '')
JavaScript の要素でクラスが使用されているかどうかを確認する
クラスが特定の要素に適用されているかどうかを確認するには、上記の正規表現を使用できます。これは、if(); を使用して最もよく達成されます。結果を与えるステートメント。例えば：
if (document.getElementById('ElementOne')
.className.match(/(?:^|\s)ClassOne(?!\S)/))
print('Class has been used.')
チェックが正の場合はクラスが使用されましたという出力になり、負の場合は else ステートメントで代替アクションまたは出力が定義されていない限り出力はありません。
JavaScript コードを HTML イベント属性に直接記述することはお勧めしません。アプリケーションの実行が困難になり、速度が低下する可能性があります。代わりに、関数に JavaScript を記述し、onclick 属性でその関数を呼び出してから、イベントを HTML コードから JavaScript に移動することができます。これは、.addEventListener() 属性を使用して実現できます。