JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでマウスオーバー時にWebサイトの背景色を切り替える方法

JavaScriptのmouseoverイベントとmouseoutイベントを使えば、マウスカーソルがWebページに入ったとき・出たときに、サイトの背景色を簡単に切り替えることができます。この記事では、その具体的な実装方法を初心者の方にもわかりやすく解説します。

HTML

まず、シンプルなHTMLページのマークアップ例を見てみましょう。

<!DOCTYPE html>
<html>
  <body>
    <h1>このページの上でマウスを動かしてみてください</h1>
  </body>
</html>

CodePenなどの無料オンラインエディタを使えば、ブラウザだけでこのチュートリアルの内容をそのまま試すことができます。

JavaScript

ユーザーがマウスをページ上に乗せたとき、そしてページの外に動かしたときに背景色を切り替えるには、次の3つのステップが必要です。

  • <body>要素を取得し、変数に参照を保存する
  • windowオブジェクトに、mouseoverとmouseoutの2種類のイベントリスナーを設定する
  • 2つの色の値でbackgroundColorプロパティを切り替える

1. body要素への参照を保存する

まずは、Webページ上のすべてのコンテンツを包んでいる<body>要素への参照を、変数に保存しましょう。

const bodyElement = document.querySelector("body")

2. mouseoverイベントを設定する

続いて、ユーザーがマウスをページ上に移動したときに発火するイベントを設定し、背景色を赤に変更する処理を実行します。以下のコードをJavaScriptファイルに追加してください。

const bodyElement = document.querySelector("body")

// 新しいコード
window.addEventListener("mouseover", function() {
  bodyElement.style.backgroundColor = "red"
})

これで、マウスをページに乗せると背景色が赤に変わるようになりました。

3. mouseoutイベントを設定する

では、マウスがページの枠外に出たときに、背景色をデフォルトの白へ戻すにはどうすればよいのでしょうか?

最もシンプルなのは、先ほどのwindowイベントをコピーして、mouseoverをmouseoutに、backgroundColorの値を"white"に書き換える方法です。

const bodyElement = document.querySelector("body")

window.addEventListener("mouseover", function() {
  bodyElement.style.backgroundColor = "red"
})

// 新しいコード
window.addEventListener("mouseout", function() {
  bodyElement.style.backgroundColor = "white"
})

これで期待どおりに動作します。しかし、これが本当にベストな書き方と言えるでしょうか?

より良い書き方：名前付き関数へのリファクタリング

残念ながら、JavaScriptでは1つのイベントリスナーに複数のイベントを登録することはできません（jQueryなら可能です）。もしできれば、コードの重複を減らせるのですが。

そこでおすすめしたいのが、名前付き関数を2つ定義し、それぞれをイベントリスナーに渡す方法です。

const bodyElement = document.querySelector("body")

function mouseOver() {
  bodyElement.style.backgroundColor = "red"
}

function mouseOut() {
  bodyElement.style.backgroundColor = "white"
}

window.addEventListener("mouseover", mouseOver)
window.addEventListener("mouseout", mouseOut)

ご覧のとおり、動作はまったく同じです。

リファクタリング後のコードは、無名（匿名）関数を使わないというJavaScriptの一般的なベストプラクティスに沿っているため、より読みやすくクリーンになっています。

さらに、このコードは再利用可能である点も大きなメリットです。名前付き関数であれば、どの種類のイベントリスナーからでも呼び出せるため、さまざまな場面で実用的に活用できます。

色の指定方法

背景色の値には、色の名前（"red"など）のほか、16進数（hex）やrgba形式の値も使用できます。用途に応じて使い分けるとよいでしょう。

  1. JavaScriptで要素の周囲のアウトライン（輪郭線）の色を設定する方法

    JavaScriptで要素の周囲に表示されるアウトライン（輪郭線）の色を変更するには、outlineColorプロパティを使用します。このプロパティは、CSSのoutline-colorと同様の役割を持ち、色名やカラーコード（#5F5F5Fなど）を指定することで、要素の外側に描かれる線の色を自由に設定できます。なお、アウトラインはborder（境界線）とは異なり、レイアウトに影響を与えずに要素の外側に表示されるのが特徴です。以下のコード例では、ボタンをクリックするとdiv要素に太い実線のアウトラインが追加され、その色がグレー（#5F5F5F）に設定されます。サンプルコード<!DOCTYP

  2. JavaScriptでテキストを切り替える（トグルする）方法を解説

    JavaScriptを使えば、ボタンをクリックするたびに表示されるテキストを切り替える（トグルする）処理を簡単に実装できます。ここでは、innerHTMLプロパティと条件分岐を組み合わせた、最も基本的なテキスト切り替えの方法をサンプルコード付きで解説します。実装コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>