この記事では、Webページの背景とフォントの色を変更するJavaScriptメソッドについて説明します。参照のためにそれを共有してください。特定の分析は次のとおりです。
JavaScript、ボタンをクリックしてWebページの背景とフォントの色を変更します。 Webページの色を変更するNボタンがあります。異なるボタンをクリックすると、Webページのフォントと背景が異なる色に変わります。非常にシンプルなJavaScriptアプレット。
1。基本的な目的
Webページを開くとすぐに、最初に挨拶メッセージ「Hello」を促します。
Webページの色を変更するNボタンがあります。ここで、返品はWebページのデフォルト色で、背景は白で、フォントは黒です。
別のボタンをクリックすると、Webページのフォントと背景が異なる色に変更されます。
私はもともと虹の改善をしたかったのですが、原則はまったく同じであるため、これ以上のボタンを書くことはありません。
2。基本的なアイデア
重要なのは、ボディータグとフォントJSにIDを提供して、JSで制御できるようにすることです。この例は、JS関数へのアプリケーションを提供します。
3。生産プロセス
単純な小さなページ、詳細についてはコメントをご覧ください。
次のようにコードをコピーします。
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<title> js変更背景色</title>
<! - この段落はJSファイルに分離することもできますが、このコードは短すぎるため、必要ありません - >
<script type = "text/javascript">
//オンロードはこのWebページのコンストラクターと同等であり、OnunloadはこのWebページの分離関数と同等です
function load(){
アラート( "Hello!");
}
function unload(){
アラート(「さようなら!」);
}
関数changecolor(bcolor、fcolor){
//フォントのフォントの色の変更に相当<span style = "色:渡されたfcolor">
document.getElementById( "body")。style.background = bcolor;
document.getElementById( "ziti")。style.color = fcolor;
}
</script>
</head>
<! - 重要なのは、Webページ全体とラインフォントにIDを提供することです。 JSのgetElementByID()メソッドは、CSSの物事を簡単に制御できます - >
<body onload = "load()" onunload = "unload()" id = "body">
<span id = "ziti"> js </span>
<br />
<! - パラメーターを二重引用符で渡すと、元の二重引用符が単一の引用符になることに注意してください。 OnClickの値は、このボタンがクリックされるとトリガーされるものです - >
<入力onclick = "changecolor( '#ff0000'、 '#ffffff')" type = "ボタン"
value = "red" />
<入力onclick = "changecolor( '#ff9900'、 '#ffffff')" type = "ボタン"
value = "orange" />
<入力onclick = "changecolor( '#ffff00'、 '#000000')" type = "ボタン"
value = "Yellow" />
...
<入力onclick = "changecolor( '#ffffff'、 '#000000')" type = "ボタン"
value = "return" />
</body>
</html>
onunload()関数は、IEがこのページを閉じる場合にのみほぼ有効です。このダイアログボックスはフロントエンドになく、Google Chromeは効果がありません。したがって、この関数にはほとんど意味がありません。
JSカラーオペレーションスキルに興味がある友人は、オンラインツールを参照することもできます。
RGBカラーエンコーディングジェネレーター
オンラインWebカラーマッチングツール
RGBカラークエリ比較テーブル_colorコードテーブル_colour英語名コレクション
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。