JavaScriptを使用して（マウスオーバーで）Webサイトの背景色を切り替える方法

JavaScriptのmouseoverを使用して、ウェブサイトの内側と外側にマウスを移動したときに、ウェブサイトの背景色を切り替える方法を学びます。およびmouseout イベント。

HTML

単純なHTMLページのマークアップは次のとおりです。

<!DOCTYPE html>
<html>
  <body>
    <h1>Move your move over this page</h1>
  </body>
</html>

CodePenのような無料のオンラインテキストエディタを使用して、このチュートリアルに従うことができます。

JavaScript

ユーザーがマウスをWebサイトのフレームの上または外に移動したときに、Webサイトの背景色を切り替えるには、次のことを行う必要があります。

<body>をターゲットにする要素を作成し、その要素への参照を変数に格納します。
windowでイベントリスナーを設定します mouseoverという2つのイベントタイプをリッスンするオブジェクト、およびmouseout
backgroundColorを切り替えます 2つの色の値を持つプロパティ。

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

まず、ウェブサイトの<body>への参照を保存する必要があります Webページのすべてのコンテンツをラップする要素：

const bodyElement = document.querySelector("body")

「マウスオーバー時」イベントの設定

次に、ユーザーがマウスをページ上に移動したときにリッスンするイベントを設定してから、背景色をreに変更する関数を実行します。次のコードをJavaScriptファイルに追加します。

const bodyElement = document.querySelector("body")

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

よかった、それはうまくいく！

「onmouseout」イベントの設定

では、ユーザーがマウスをWebサイトのフレームの外に移動したときに、背景色をデフォルトの白に戻すにはどうすればよいでしょうか。

上からウィンドウイベントをコピーして、mouseoverを置き換えることができます。 mouseoutを使用、およびbackgroundColor "white"へ。

この場合、コードは次のようになります。

const bodyElement = document.querySelector("body")

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

// New code
window.addEventListener("mouseover", function() {
  bodyElement.style.backgroundColor = "white"
})

動作します！

しかし、これはこの問題を解決するための最良の方法ですか？

残念ながら、できません （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ガイドラインに従っているという意味で、少しわかりやすくなっています。

このコードは再利用可能でもありますこれで、2つの名前付きを呼び出すことができます。あらゆるタイプのイベントリスナーから機能します。これは多くの状況で実用的です。

コードデモをご覧ください。

色の値には、実際の名前（ "red"など）、16進数のいずれかを使用できます。またはrgba 値。

インラインJavaScriptを使用してmouseOver/mouseOutで画像を交換する簡単な方法

JavaScriptを使用して（マウスオーバーで）Webサイトの背景色を変更する方法

JavaScriptで要素の周りの輪郭の色を設定するにはどうすればよいですか？
アウトラインの色を設定するには、outlineColorを使用します財産。次のコードを実行して、JavaScriptを使用して要素の周囲の輪郭の色を設定してみてください。例 <!DOCTYPE html> <html> <head> <style> #box { width: 450px; &n
JavaScriptでテキストを切り替える方法は？
JavaScriptでテキストを切り替えるためのコードは、次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana,