VanillaJavaScriptを使用して要素からクラスを削除する方法

HTML要素からクラスを削除するのは、JavaScriptのclassListプロパティのremove()を使用するだけです。 方法。すでに要素にクラスを追加する方法を読んだ場合は、クラスの削除がまったく同じ方法であり、逆になっていることに気付くでしょう。

最初に一般的なclassList.remove（）式を見てから、実際の例を続けてみましょう。

式

var element = document.querySelector("selector")
element.classList.remove("class")

上記の一般的な例では、最初のHTML要素が見つかります 指定されたセレクター名のページ （要素セレクター、クラスセレクターなど）、変数を使用してそれへの参照を格納します。

次に、classListプロパティのを添付します remove() 要素オブジェクト（変数）へのメソッドを指定し、そこから削除するクラスを指定します。

実用的なclassList.remove（）の例

クラスを見つけて削除するには、明らかにクラスを持つ要素を見つける必要があります。

では、どのクラスを削除する必要がありますか？

生活を楽にするために、italicというクラスを追加しました。 あなたが読んでいる段落に。ご覧のとおり、テキストは斜体になっています。

新しく見つかったclassList.removeテクニックを使用して、上記の段落を「非イタリック化」しましょう。

var firstParagraph = document.querySelector(".italic")
firstParagraph.classList.remove("italic")

そしてその結果：

注：italicがあります 私のウェブサイトのCSSスタイルシートのクラス、それが機能する理由です。クラスは次のようになります：

.italic {
  font-style: italic;
}

リソース

• MDN Web Docs element.classList