JavaScriptでCSSクラスを削除する（jQueryなし） - 他の方法
2024-08-27
JavaScriptでCSSクラスを要素から削除する（jQueryなし）
JavaScriptを使用してHTML要素からCSSクラスを削除する方法を解説します。jQueryを使用せずに純粋なJavaScriptを用いるアプローチです。
方法
要素の取得:
document.getElementById()を使用して要素のIDで取得します。document.querySelector()を使用してCSSセレクターで取得します。
クラス名の取得:
削除したいクラスの除去:
新しいクラス名の作成:
コード例
// 要素のIDで取得
const element = document.getElementById("myElement");
// 削除したいクラス名
const classNameToRemove = "classToRemove";
// 現在のクラス名を分割
const currentClasses = element.className.split(" ");
// 削除したいクラスをフィルタリング
const newClasses = currentClasses.filter(cls => cls !== classNameToRemove);
// 新しいクラス名を設定
element.className = newClasses.join(" ");
解説
document.getElementById("myElement")は、IDが"myElement"の要素を取得します。className.split(" ")は、現在のクラス名をスペースで分割し、配列にします。filter(cls => cls !== classNameToRemove)は、配列から削除したいクラスをフィルタリングします。newClasses.join(" ")は、フィルタリングされたクラス名をスペースで結合して新しいクラス名を作成します。element.className = newClasses.join(" ")は、要素のクラス名を新しいクラス名に更新します。
コード例解説
// 要素のIDで取得
const element = document.getElementById("myElement");
// 削除したいクラス名
const classNameToRemove = "classToRemove";
// 現在のクラス名を分割
const currentClasses = element.className.split(" ");
// 削除したいクラスをフィルタリング
const newClasses = currentClasses.filter(cls => cls !== classNameToRemove);
// 新しいクラス名を設定
element.className = newClasses.join(" ");
現在のクラス名の取得と分割:
削除したいクラスのフィルタリング:
cls => cls !== classNameToRemoveは、現在のクラス名（cls）が削除したいクラス名と異なる場合にtrueを返し、フィルタリングされた配列に含まれます。
結果
このコードを実行すると、IDが"myElement"の要素から"classToRemove"というクラスが削除されます。
注意
- 複数のクラスが要素に設定されている場合、削除したいクラス以外のクラスは保持されます。
- 要素にクラスが設定されていない場合は、何も起こりません。
const element = document.getElementById("myElement");
element.classList.remove("classToRemove");
classListプロパティは、要素のクラスリストを管理するためのオブジェクトです。remove()メソッドを使用して、指定したクラスを削除します。
replace()メソッドを使用する
const element = document.getElementById("myElement");
element.className = element.className.replace("classToRemove ", "");
replace()メソッドを使用して、クラス名を検索し、空の文字列に置き換えます。- 削除したいクラス名の後にスペースがあることを想定しています。
正規表現を使用する
const element = document.getElementById("myElement");
element.className = element.className.replace(/\bclassToRemove\b/g, "");
- 正規表現を使用して、クラス名を正確にマッチさせます。
\bは単語境界を表し、gフラグはグローバルマッチを指定します。
const element = document.getElementById("myElement");
const classes = element.className.split(" ");
classes.forEach((cls, index) => {
if (cls === "classToRemove") {
classes.splice(index, 1);
}
});
element.className = classes.join(" ");
forEach()メソッドを使用して、クラスリストをループし、削除したいクラスを検出します。splice()メソッドを使用して、検出したクラスを配列から削除します。
選択基準
classListプロパティは、最もシンプルで読みやすい方法です。replace()メソッドは、クラス名が特定の形式である場合に便利です。- 正規表現は、より複雑なマッチングが必要な場合に使用できます。
forEach()メソッドは、クラスリストを操作する必要がある場合に使用できます。
javascript html css
