方法-クラスを追加する
JavaScriptを使用して要素にクラス名を追加する方法を学びます。
ボタンをクリックして、クラスを追加してください。
クラスを追加
ステップ1)HTMLを追加します。
id = "myDIV"を使用してdiv要素にクラス名を追加します(この例では、ボタンを使用してクラスを追加します)。
例
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
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.add("mystyle");
}
ヒント:クラスを切り替える方法も参照してください。
ヒント:クラスを削除する方法も参照してください。
ヒント: JavaScriptリファレンスでclassListプロパティの詳細をご覧ください。
ヒント: JavaScriptリファレンスでclassNameプロパティの詳細をご覧ください。