JavaScript

[JavaScript] 指定したCSSクラス名の全ての背景色を変更する

投稿日:2016年10月2日 更新日:

指定したCSSクラス名が定義された要素全ての背景色を変更するサンプルです。
ソースを一部書き換えれば、背景色以外の変更にも対応できます。

クラス名を指定して背景色を動的に変更する

例)class="c1"の要素すべての背景色を緑にする

実行サンプル

ボタンを押すと、class="c1"の枠の部分のみ背景色が替わります。

class="c1"です
class="c2"です
class="c1"です
  

※初期状態に戻したい時は、当ページを[F5]キー等でリロードしてください。

解説

  • document.getElementsByClassNameを使うと、指定したクラス名が付けられたオブジェクトが配列で取得できます。
  • 取得した要素1つ1つに対して背景色を指定することで、表題の機能を実現させています。

スポンサーリンク

スポンサーリンク

-JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[JavaScript] 半角は1文字、全角は2文字として文字数をカウントする

半角文字は1文字、全角文字は2文字として文字数をカウントするサンプルです。 サンプルソース 例)半角文字は1文字、全角文 ...

[JavaScript] 配列→カンマ区切り文字列にする

文字列配列からカンマ区切り文字列に変換するサンプルです。 サンプルソース 例)文字列配列からカンマ区切り文字列に変換する ...

[JavaScript] 配列を生成する

配列を生成するサンプルです。 配列を生成するサンプル 配列の生成方法には、以下3パターンがあります。 例)配列を生成する ...

[JavaScript] で変数を宣言する(var, let)

JavaScriptで変数を宣言するには、var または letを使用します。 ※letはECMAScript6以降対応 ...

[JavaScript] 2進数、8進数、16進数値⇔10進数を変換する

2進数、8進数、16進数と10進数を変換するサンプルです。 n進数→10進数に変換する n進数を10進数に変換するには、 ...

スポンサーリンク