Javascript

classNameを操作してみよう

classNameを使ってクラス属性を操作する方法について見ていきます。

  • className

className

・CSS のクラスにして class 属性を操作することでスタイルを変更していきます。

・今回はHTMLの方でCSSファイルを読み込ませて、JavaScriptでCSSのスタイルを読み込んで行きます。my-color というクラスでスタイルをセットしていきましょう。文字色と背景色をセットしていきます。

・まずHTMLのheadにCSSを読み込むためのファイルを作りましょう。リンクタグを使って<link rel="stylesheet" href="styles.css">というように書いていけばいいでしょう。

・次にそのファイルを開いたら.my_colorを作っていきます。内容は文字色を赤に、背景を緑にしていきます。

・最後にJavaScript のほうで、今作ったクラスを target に付けてあげましょう。targetNode.className = 'my_color';

としれあげればおkです。このとき.classNameとしてあげましょう。JavaScriptでは.classだと違う意味合いになってしまうのでこの点は注意が必要です。

・className ですが、この要素に他のクラスがすでに付いていたら className を使うとクラス属性の値が丸っと書き換わってしまうので注意が必要です。

・なのでJavaScriptの方にもクラスを書いていく必要があります。半角空白でクラス名を書いてあげましょう。

・クラス属性はもう少し便利に使う命令もありますので次回そちらも紹介していきます。

-Javascript