home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Javascript

วิธีสลับสีพื้นหลังบนเว็บไซต์ (บนเมาส์โอเวอร์) ด้วย JavaScript

เรียนรู้วิธีสลับสีพื้นหลังบนเว็บไซต์เมื่อคุณเลื่อนเมาส์เข้าและออกโดยใช้ mouseover ของ JavaScript และ mouseout เหตุการณ์

HTML

นี่คือมาร์กอัปสำหรับหน้า HTML อย่างง่าย:

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

คุณสามารถใช้โปรแกรมแก้ไขข้อความออนไลน์ฟรี เช่น CodePen เพื่อทำตามบทช่วยสอนนี้

JavaScript

ในการสลับสีพื้นหลังของเว็บไซต์เมื่อผู้ใช้เลื่อนเมาส์ไปด้านบนและนอกกรอบเว็บไซต์ คุณต้อง:

  • กำหนดเป้าหมาย <body> องค์ประกอบและเก็บการอ้างอิงไว้ในตัวแปร
  • ตั้งค่าตัวฟังเหตุการณ์บน window ออบเจ็กต์ที่รับฟังเหตุการณ์สองประเภท mouseover และ mouseout
  • สลับ backgroundColor คุณสมบัติที่มีค่าสองสี

จัดเก็บการอ้างอิงไปยังองค์ประกอบเนื้อหา

ก่อนอื่น คุณต้องเก็บข้อมูลอ้างอิงถึง <body> . ของเว็บไซต์ของคุณ องค์ประกอบซึ่งรวมเนื้อหาทั้งหมดบนหน้าเว็บ:

const bodyElement = document.querySelector("body")

การตั้งค่าเหตุการณ์ “เมื่อวางเมาส์เหนือ”

ตอนนี้ มาตั้งค่าเหตุการณ์ที่จะรับฟังเมื่อผู้ใช้เลื่อนเมาส์ไปบนหน้า แล้วเรียกใช้ฟังก์ชันที่เปลี่ยนสีพื้นหลังเป็นสีใหม่ เพิ่มรหัสต่อไปนี้ในไฟล์ JavaScript ของคุณ:

const bodyElement = document.querySelector("body")

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

เยี่ยมมาก ได้ผล!

กำลังตั้งค่าเหตุการณ์ “on mouseout”

แล้วเราจะเปลี่ยนสีพื้นหลังกลับเป็นสีขาวเริ่มต้นได้อย่างไร เมื่อผู้ใช้เลื่อนเมาส์ไปนอกกรอบเว็บไซต์อีกครั้ง

คุณสามารถคัดลอกเหตุการณ์หน้าต่างจากด้านบนและแทนที่ 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) ซึ่งจะทำให้โค้ดซ้ำซ้อนน้อยลง

อย่างไรก็ตาม เราสามารถตั้งค่าฟังก์ชันที่มีชื่อสองฟังก์ชันแทน และส่งแต่ละฟังก์ชันไปยังตัวฟังเหตุการณ์ของหน้าต่างได้ ดังนี้:

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 ที่ไม่ใช้ฟังก์ชันที่ไม่ระบุชื่อ (ไม่ระบุชื่อ)

รหัสนี้ยัง ใช้ซ้ำได้ เนื่องจากตอนนี้คุณสามารถเรียกทั้งสอง ชื่อ ฟังก์ชันจากผู้ฟังเหตุการณ์ทุกประเภท ซึ่งใช้ได้จริงในหลายสถานการณ์

ตรวจสอบการสาธิตโค้ด

สำหรับค่าสี คุณสามารถใช้ชื่อจริง (เช่น "สีแดง"), ฐานสิบหก หรือ rgba ค่า