[装飾・内容変更]JavaScriptを使ってページの背景色を動的に変更する方法はとても簡単で、document.body.style.backgroundColorに望みの色(値)を設定するだけです。ちなみに、昔々に使われていたdocument.bgColorやdocument.body.bgColorは既に非推奨になっていますので使わないようにしましょう。ウェブページの背景色をJavaScriptで動的に変更する方法ウェブページの背景色をボタンで動的に変更するサンプルウェブページの背景色をボタンで動的に変更するサンプルのソースウェブページの背景色をJavaScriptで動的に変更する方法JavaScriptを使うと、ページの背景色を簡単に変更できます。背景色を動的に変更したいと思うことは少ないかも知れませんが......。画像素材配布サイトなどでは、画像の使用感をつかむために、サンプルページの背景色を切り替えられるボタンを用意しているところがありますね。そんな感じで活用すると便利だろうと思います。ページの背景色を変更するソースはとても簡単で、以下のように記述するだけです。"#ccffcc";上記の場合は、ページの背景色を「淡い緑色(#ccffcc)」に変更します。これは、body要素に適用されているスタイル(style)のうち、背景色(backgroundColor)に対して値を代入する処理です。値にはCSSで指定可能な値なら何でも代入可能ですから、下記のようにRGBAカラーモデルで透明度も含めて指定することもできます。"rgba(128,128,255,0.5)";上記の場合は、半透明の淡い青色を指定しています。ページの背景を半透明にする意味はなさそうですが。(ページの背景の下には透けて見える物が何もないわけですから。いう書き方もできましたが、これは今では非推奨になっていますので避けた方が良いでしょう。ページの背景色ではなく、任意の要素の背景色を変更する方法は、「任意の要素(ブロックなど)の背景色を動的に変更する方法」をどうぞ。ボックスの背景色をボタンで動的に変更するサンプルこの書き方を利用して、ボックスの「背景色変更ボタン」を作ってみた例は、以下の通りです。ページ自体の背景色を変更するには、今ご覧になっているページでは試せないので、別ページにサンプルを置いておきます。ウェブページの背景色をボタンで動的に変更するサンプルボックスの背景色をボタンで動的に変更するサンプルのソースボタンクリックでページの背景色を動的に変更する機能を実現するJavaScriptソースは以下の通りです。デフォルトの装飾を以下のようにCSSで書いておきます。body要素に対して背景色を加えているだけです。*/}さて次に、ボタンクリックで背景色を動的に変更するための関数をJavaScriptで作成します。newColor;}上記で作成しているchangePageBgColor関数は、ページの背景色(backgroundColor)を、引数に与えられた文字列に変更する関数です。引数に与えられた内容が、色名として使用可能な文字列ではなかった場合のエラー処理などは一切していませんが。自分で使うだけの関数なら、あまり問題はないでしょう。^^;最後に、この関数を呼び出すボタンを作成します。これらのボタンには、onclick属性を付加して、上記で作成したchangePageBgColor関数を実行しています。その際、「変更したい背景色」を引数に指定しています。onclick="changePageBgColor('#ccffcc');"></p>ものすごくシンプルな背景色の変更方法ですが。コーヒーをおごる著者紹介にしし(西村文宏)にししでございます。本書いたり記事書いたりしてます。著書5冊発売中です(Web製作系4冊+小説1冊)。本の最新刊は2011年3月に発売されたライトノベルでございますよ。Aboutでウェブ作成系の記事を連載しています。2001年からの累計記事数は400本を超えています。電子書籍を書きました。Unlimitedにも対応。(紙の本)5冊の著書があります。➡著書一覧と詳細これまでに、下記の書籍を上梓致しました。逃走少女と契約しました。製作依頼について●製作のご依頼は:ウェブページ全般の製作依頼だけでなく、特定の機能を提供するJavaScript単体の作成作業も含め、各種の製作依頼を承っております。お気軽にお問い合わせ下さい。モダンスタイルによる基礎から現場での応用まで▲JavaScriptの文法仕様を基礎からしっかり把握したい場合にお勧めです。解説がとても詳しく、基礎から応用まで網羅されていて、JavaScriptを隅々まで理解するのに役立ちます。JavaScriptを詳しく知るには、とりあえずこれを1冊読みましょう。▲JavaScriptのライブラリやフレームワークが、ひたすら多数紹介されています。目的に応じてどんなライブラリを使えば良いのか、そもそもどんなライブラリがあるのか知るのにお勧めです。▲正確な文法を知りたいとき、手軽にさっと調べられる辞書(辞典)として手許に置いておきたい場合に。▲jQueryを活用する方法について、サンプルと実現ソースが見やすく列挙された解説書。基礎から分かりやすく説明されています。▲jQueryを活用して実現できる様々なパーツ(デザインやUI)の実装方法を列挙した解説書。サンプルが多数あります。JavaScriptの基礎知識とUIデザインの実装方法などを解説したムックです。......と言っても初心者向けでは決してないので注意してね。^^;JavaScriptに関する解説書は、自分に合うかどうか立ち読みして確認したり、せめて購入前に目次などから大まかな内容はチェックしておいた方が良いと思います。TIPSふぁくとりーの主要なカテゴリ下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。(16)著者紹介にしし(西村文宏)にししでございます。本書いたり記事書いたりしてます。著書5冊発売中です(Web製作系4冊+小説1冊)。本の最新刊は2011年3月に発売されたライトノベルでございますよ。関連するかもしれない情報など▼このページに関連しそうな記事が約8本くらい自動表示されています。INFORMATIONSこのページの製作者は、にしし(西村文宏)です。このページの内容は真実であることが基本ですが、虚構や妄想が混じっていることも多々あります。(^_^;)リンクは歓迎致します。リンク用バナーも用意しています。必要であればご使用下さい。このサイトについてこのページは、スマートフォン・タブレット等のモバイル端末でもご覧頂けます。URLは端末に関係なく共通です。※このサイトは横幅768px未満で閲覧するとモバイル用、横幅768px以上で閲覧するとタブレット&PC用デザインになります。横幅920px以上での閲覧がお勧めです。古いブラウザ(特にIE7以下など)では横幅に関係なくレガシーデザインになります。