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

JavaScriptでマウスオーバー時にWebサイトの背景色を変更する方法

バニラJavaScript（フレームワークやライブラリに依存しない素のJavaScript）を使って、マウスオーバー時にWebサイトの背景色を変更する方法を解説します。

HTML

まず、シンプルなHTMLページのマークアップを用意します。

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

JavaScript

ユーザーがページ上のどの場所にマウスを移動しても背景色が変わるようにするには、次の3つのステップが必要です。

  • <body>要素を取得し、その参照を変数に格納する
  • windowオブジェクトに、mouseoverイベントを監視するイベントリスナーを設定する
  • backgroundColorプロパティに色の値を適用する

JavaScriptファイルに以下のコードを追加しましょう。

const bodyElement = document.querySelector("body")

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

これで、ユーザーがWebサイト上のどこかにマウスを動かした瞬間、背景色が即座に赤色へと変わります。実際の動作はコードデモで確認できます。

指定できる色の値

backgroundColorプロパティには、以下のような形式で色を指定できます。

  • 色名："red"や"blue"など、実際の色名をそのまま使用
  • HEX値："#ff0000"のような16進数表記
  • RGBA値："rgba(255, 0, 0, 0.5)"のように透明度も含めて指定可能

  1. Outlookカレンダーの背景色を変更する方法｜個別・一括変更の手順を解説

    Outlookカレンダーは、メールや連絡先などの機能と統合されたスケジュール管理ツールです。現在のカレンダーの背景色が気に入らない場合は、いつでも好きな色に変更できます。特に、Outlookで複数のカレンダーを使い分けている場合には、カレンダーごとに色を変えることで見分けやすくなり、とても便利です。 Outlookカレンダーの背景色を変更する手順 Outlookでカレンダーの背景色を変更するには、以下の手順に従ってください。 Outlookを起動する 「予定表」ボタンをクリックする カレンダー上の任意の場所を右クリックする コンテキストメニューの「色」にカーソルを合わせる 好きな色を選択する

  2. 【iOS】メモアプリの背景色を変更する方法｜ライト/ダーク切り替えと罫線・グリッド設定も解説

    iOSの標準「メモ」アプリを使っていると、背景が端末全体の表示設定に自動的に連動してしまう点に不便さを感じることがあります。ライトモードが有効なときは明るい背景に、ダークモードのときは暗い背景になり、個別にコントロールできないように見えます。しかし実は、iOSではメモごとの背景色を簡単に変更できます。この記事では、特定のメモだけ背景を変える方法、すべてのメモに一括で適用する方法、さらに罫線やグリッド背景を追加するカスタマイズ術まで、わかりやすく解説します。注意:メモアプリで異なる背景を設定するには、端末がiOS 13 / iPadOS 13以降である必要があります。古いバージョンをお使いの場合