【プログラミング学習】JavaScriptでスタイル操作

JavaScriptでスタイルを操作する

• mousuoverしたときに色が変わることを説明しています。
• mouseoverイベントが発火したときにインラインスタイルを追加、mouseoutイベントが発火したときにインラインスタイルを取り除くことで、色の変化をつけます。

インラインスタイル

• インラインスタイルとはHTML要素の開始タグの中に、直接CSSのソースコードを記述するプロパティの指定方法です。

setAttributeメソッド

• 指定した要素上に新しい属性を追加、または既存の属性の値を変更します。

要素.setAttribute(name,value)
/ nameは属性の名前を文字列で指定
/ valueは属性に設定したい値を指定

例

# html
<div id="test">サンプル</div>

const sample = document.getElementById("test")
sample.setAttribute("style","color: red;")

// <div id="test" style="color: red;">サンプル</div>が取得できる

removeAttributeメソッド

• 指定した要素から、特定の属性を削除します。

要素.removeAttribute(name,value)
/ nameは属性の名前を文字列で指定
/ valueは属性に設定したい値を指定

例

# html
<div class="contents" id="apple">りんご</div>

const apple = document.getElementById("apple")
sample.removeAttribute("class","contents")

// <div id="apple">りんご</div>が取得できる