HTMLのボタン背景を変更する機能

Webページ上のボタンに注目を集めるには、単に「input」タグを使用してそれらをHTMLコードに追加するだけでは不十分です。 ボタンは、デフォルトでは黒のテキストで灰色の背景を持っています。 シンプルなJavaScript関数で、退屈なボタンの背景をカラフルなものに変更したり、選択した画像で装飾することもできます。

ボタンを作成する

CSSをフォーマットしないと、基本的なWebページのボタンを作成するために必要なコードは次のようになります。

次に示すように、ボタンの背景を黄色に設定するCSSクラス参照を追加することができます。

次のCSSクラスをドキュメントのスタイルセクションに配置すると、そのクラスが作成されます。

.styleButton {背景色：黄色;}

あなたが望む外観を達成するために "黄色"を任意の有効なHTMLカラーに変更してください。 次のCSSコードを使用して、ボタンの背景に画像を追加することができます。

.styleButton {background-image：url（ 'myImage.jpg'）;}

"myImage.jpg"をWeb上の任意の画像のURLまたはWebサーバー上の画像のURLに置き換えます。

関数パラメータ

次の例は、ボタンの背景を変更する関数のフレームワークを示しています。

function changeBackground（buttonID、backgroundType、buttonBackground）{if（backgroundType == "image"）{//ボタンの背景画像を変更}

else {//ボタンの背景色を変更}}

この関数は3つのパラメータを受け取ります。 buttonIDは変更したいボタンのIDを保持します。 backgroundType変数は、「color」または「image」の値を持つことができます。 最後のパラメータbuttonBackgroundは、ボタンに追加したい色または画像のURLを保持します。 backgroundTypeの値として "image"を渡した場合、コードは最初の "if"ブロックで定義されたロジックを処理します。 それ以外の場合は、 "else"ブロック内のステートメントを実行してボタンの背景色を変更します。

コードロジック

次のコードは、backgroundTypeパラメータで渡される値に応じて、ボタンに背景画像を追加したり、その背景色を変更したりするために必要なステートメントを示しています。

function changeBackground（buttonID、backgroundType、buttonBackground）{if（backgroundType == "image"）{//ボタンの背景画像を変更するvar urlValue = "URL（ '" + buttonBackground + "'）"; document.getElementById（buttonID）.style.backgroundImage = urlValue; }

else {//ボタンの背景色を変更するdocument.getElementById（buttonID）.style.backgroundColor = buttonBackground; }}

この関数を呼び出してそれに "image"のbackgroundTypeを渡すと、コードはボタンのbackgroundImage属性をbuttonBackground変数に渡された色に設定します。 それ以外の場合、コードはボタンのbackgroundColor属性をbuttonBackground変数に渡された色に設定します。

ヒント

この機能を使用して画像を背景に追加する場合は、ボタンの内側に収まるように十分に小さいものを選択してください。 HTMLでは、ページ要素がなくても画像のサイズが縮小されることはありません。 小さなアニメーションGIFを追加することで、ボタンの背景を移動、脈動、または輝かせることもできます。 ボタンにテキストがあるとボタンのテキストが読みにくくなる可能性があるため、ボタンの上に複雑な画像を配置するときは注意してください。