Javascript

要素の属性を操作してみよう

要素の属性を操作する方法について見ていきます。

  • title属性の操作
  • style属性の操作

title属性の操作

・要素の属性を操作する方法について見ていきます。title属性から見ていきますがtitle属性はホバーするとでてくるメッセージです。

・まず、HTMLにタイトル属性を付けてあげます。DOM ではいくつかの例外を除いて、属性と同名のプロパティが用意されているので、title プロパティにして、 This is title! と値を設定してみましょう。

・同じコードを書いている場合は定数にしてあげると修正に強く、見やすくなるので今回も積極的に使っていきます。targetNode という定数名にしてあげます。

・document.getElementById('target’)を代入してあげると次回からtargerNodeの定数で使うことが出来ます。

style属性の操作

・targetNode.style.colorとしてあげるとCSSのスタイルのJSで書き換えることが出来ます。値は’red’;としてあげればおkです。

・ CSS のプロパティが - で区切られている場合は注意が必要です。背景色を設定したい場合、 background-color = skyblue ではなくて、 JavaScript から扱いときは - を消して、 2 単語目以降の最初の文字を大文字にしてあげる必要があります。backgroundColorと書くようにしましょう。

・ただ、スタイルに関しては、 JavaScript でこのように書いてしまうと、 CSS との役割分担があいまいになるので、見た目の指定は CSS に任せて、 JavaScript では class 属性の操作だけを書く方法が一般的です。

-Javascript