コピペで使える JavaScript逆引きリファレンス

JavaScript/jQuery開発時に、こそっとお使いください。

CSS関連 JavaScript

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

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

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

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

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

実行サンプル

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

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

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

解説

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

スポンサーリンク

スポンサーリンク

-CSS関連, JavaScript

執筆者:


comment

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

関連記事

[JavaScript] 連動するセレクトボックス

連動するセレクトボックスのサンプルです。 サンプルソース 例)都府県を選択すると、市区の選択肢が変わるセレクトボックス ...

[JavaScript] 半角英数チェックを行う

半角英数チェックを行うサンプルFunctionです。 サンプル 例)値が半角英数の場合はtrueを返す(空文字はOK,半 ...

[JavaScript] 現在日付をYYYY/MM/DD形式の文字列で取得する

現在日付をYYYY/MM/DD形式の文字列で取得するサンプルFunctionです。 サンプル 例)現在日付をYYYY/M ...

[JavaScript] 指定したページ数分履歴を移動する(history.go)

指定したページ数分履歴を移動するには、history.go()を使用します。 サンプルソース 例)指定したページ数分履歴 ...

[JavaScript] Submit時イベントを取得する(onSubmit)

Submit時イベントを取得するには、onsubmitイベントハンドラを使用します。 サンプルソース 例)Submit前 ...

スポンサーリンク