方法-クラスを削除する
JavaScriptを使用して要素からクラス名を削除する方法を学びます。
ボタンをクリックして、クラスを削除してください。
クラスを削除
ステップ1)HTMLを追加します。
この例では、ボタンを使用して、id = "myDIV"の<div>要素から "mystyle"クラスを削除します。
例
<button onclick="myFunction()">Try it</button>
<div id="myDIV"
class="mystyle">
This is a DIV element.
</div>
ステップ2)CSSを追加します。
指定されたクラス名のスタイルを設定します。
例
.mystyle {
width: 100%;
padding:
25px;
background-color: coral;
color: white;
font-size: 25px;
}
ステップ3)JavaScriptを追加します。
id = "myDIV"で<div>要素を取得し、そこから「mystyle」クラスを削除します。
例
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.remove("mystyle");
}
ヒント:クラスを切り替える方法も参照してください。
ヒント:クラスを追加する方法も参照してください。
ヒント: JavaScriptリファレンスでclassListプロパティの詳細をご覧ください。
ヒント: JavaScriptリファレンスでclassNameプロパティの詳細をご覧ください。