. JavaScript TIPSふぁくとりー
JavaScript TIPSふぁくとりー
JavaScript TIPSふぁくとりー

Без кейворда

《 2017年5月27日 5:00 PM 公開/更新》

任意の要素(ブロックなど)の背景色を動的に変更する方法 [装飾・内容変更]

  • 特定のボックスの背景色をJavaScriptで動的に変更する方法
    • ボックスの背景色をボタンで動的に変更するサンプル
    • ボックスの背景色をボタンで動的に変更するサンプルのソース
    特定のボックスの背景色をJavaScriptで動的に変更する方法

    スタイルシート(CSS)を使えば任意の要素に背景色を付加できます。この背景色は、JavaScriptを使えば動的に変化させられます。例えば、ある段落の背景色がスタイルシートで赤色に指定されているとき、JavaScriptを使って後から(マウス操作などに合わせて)青色に変化させることなどができます。 ウェブページの背景色を動的に変更する方法は簡単でしたが、ウェブページ内に存在する任意の要素(ブロックでもインラインでも)の背景色を変更するのはちょっとだけ手間が必要で、事前に対象要素にid名を割り振っておく必要があります。 id名さえ割り振ってあれば、以下のような記述だけで背景色を変更できます。

    document.getElementById('対象id名').style.backgroundColor = '新しい背景色';

    getElementByIdを使って対象要素を特定し、styleプロパティのbackgroundColorプロパティの値に、望みの背景色を代入するだけです。 例えば、 id="samplebox" が指定された要素の背景色を、空色( skyblue )に変更するなら、以下のようにJavaScriptを記述します。

    document.getElementById('samplebox').style.backgroundColor = 'skyblue';

    ボックスの背景色をボタンで動的に変更するサンプル ボックスの背景色をボタンで動的に変更するサンプルのソース

    サンプルボックス

    #sakurabox < border:1px dashed gray; /* 枠線 */ border-radius:1em; /* 角丸 */ background-color:#ccffcc; /* 背景色 */ > function changeBoxColor( newColor )

    上記で作成しているchangeBoxColor関数は、id名がsakuraboxであるボックスの背景色(backgroundColor)を、引数に与えられた文字列に変更する関数です。 引数に与えられた内容が、色名として使用可能な文字列ではなかった場合のエラー処理などは一切していませんが……。(^_^;) まあ、自分で使うだけの関数なのですから、特に問題はないでしょう。

    背景色を…

    ものすごくシンプルな背景色の変更方法ですが。 上記のサンプルでは、ただ1回だけ色を変更します。for文を使ったループで色を変化させれば、ある色からある色へなめらかに変化させたりもできるでしょう。色を表す数値の作成がちょっと面倒ですが。 その話は、またの機会に。

    著者紹介

    製作ツール

    CGI てがろぐ お手軽マイクロブログ的フリーCGI ➡ 備忘録・メモ帳・日記・チャットツールなどとしてのほか、「自分専用Twitter」などとしても活用可能な、お手軽メモ掲示板フリーCGIです。 CGI さんごよみ スキン式のカレンダー表示フリーCGI ➡ カレンダー形式でスケジュールを表示できる予定表掲示板フリーCGIです。日本の祝日規則や移動祝日にも対応するほか、独自記念日の登録や、RSS配信も可能。 ▼JavaScript関連記事(抜粋)：

    著書 (紙の本)

    • 小説 逃走少女と契約しました。猫だけど。 2011年3月1日 ホビージャパン(HJ文庫)刊
    • 実用書 即戦プロ技 Movable Typeデザインテンプレートコレクション 2009年5月13日 毎日コミュニケーションズ刊
    • 実用書 ブログ・LPO対策まで SEO・SEM使いこなしテクニック 2007年11月27日 日本実業出版社刊
    • 実用書 初心者でもわかるアクセスアップの成功強化書 2006年10月31日 ローカス刊
    • 実用書 HTML＆スタイルシート プロ顔負けのホームページ作成術 2005年10月12日 成美堂出版刊

    電子書籍

    下記の電子書籍を書きました。Kindle Unlimited対応。
    • 実用書 重いサイトを軽くする、Webページ表示速度の高速化10の基本 2019年6月13日
    • 実用書 個人でも簡単！ 時間をかけない最低限のSEO、今すぐできる７つの基本 2019年1月28日

    記事ランキング

    1. 任意の要素(ブロックなど)の背景色を動的に変更する方法
    2. ページの読み込み前・直後・完了時にスクリプトを実行する方法いろいろ
    3. 直前に閲覧したページのURL(リファラ情報)を得る方法
    4. 「OK/キャンセル」ダイアログを表示して確認・分岐する方法
    5. テキスト入力欄に最初からカーソルを入れる(フォーカスを与える)方法
    6. 直前のページに戻るリンクを作る方法
    7. 入力された文字列に含まれる空白文字を削除する方法
    8. 期限日時までをリアルタイムにカウントダウン表示する方法
    9. チェックボックス全部を一括ON/OFFする機能を作る方法
    10. 数値の大きい順・小さい順に文字列を並び替える(ソートする)方法

    オススメ JavaScript解説書

    ▲HTML5, CSS3, JavaScriptの基礎知識とUIデザインの実装方法などを解説したムックです。

    JavaScript関連 の新刊

    JavaScript TIPSふぁくとりーの主要なカテゴリ
    • イベント (6)
    • 入力フォーム (12)
    • 情報取得 (5)
    • 操作・移動 (3)
    • 日付・時刻 (6)
    • 機能 (9)
    • 装飾・内容変更 (11)
    • 計算・変換 (17)

    著者紹介

    関連するかもしれない情報など

    HTML convert time: 0.096 sec.

    --- 当サイト内を検索 ---

    このページの製作者は、にしし（西村文宏）です。 このページの内容は真実であることが基本ですが、虚構や妄想が混じっていることも多々あります。(^_^;) リンクは歓迎致します。リンク用バナーも用意しています。必要であればご使用下さい。

    • にしし/西村文宏 on Twitter
    • 西村文宏(にしし) on facebook
    • にしし/西村文宏 on mixi西村文宏(にしし) on Google＋
    • にしし/西村文宏 on Pawoo
    • にしし/西村文宏 on Bluesky
    • RSS

    Copyright © 1997-2025 西村文宏/にしし Fumihiro Nishimura (Nishishi).

    このページは、スマートフォン・タブレット等のモバイル端末でもご覧頂けます。URLは端末に関係なく共通です。モバイル端末で 当サイトのHOMEページ にアクセスするには、下記のQRコードを読み取ると楽です。