เรียนรู้วิธีเปลี่ยนสีพื้นหลังบนเว็บไซต์เมื่อคุณเลื่อนเมาส์ไปเหนือเว็บไซต์ด้วย JavaScript วานิลลา
HTML
นี่คือมาร์กอัปสำหรับหน้า HTML อย่างง่าย:
<!DOCTYPE html>
<html>
<body>
<h1>Move your move over this page</h1>
</body>
</html>JavaScript
ในการเปลี่ยนสีพื้นหลังเมื่อผู้ใช้เลื่อนเมาส์ไปที่ส่วนใดส่วนหนึ่งของหน้า คุณต้อง:
- กำหนดเป้าหมาย
<body>และเก็บการอ้างอิงไว้ในตัวแปร - ฟังเหตุการณ์ใน
windowวัตถุที่ฟังmouseoverเหตุการณ์ - ใช้
backgroundColorคุณสมบัติที่มีค่าสี
เพิ่มรหัสต่อไปนี้ในไฟล์ JavaScript ของคุณ:
const bodyElement = document.querySelector("body")
window.addEventListener("mouseover", function() {
bodyElement.style.backgroundColor = "red"
})ทันทีที่ผู้ใช้เลื่อนเมาส์ไปที่ส่วนใดส่วนหนึ่งของเว็บไซต์ของคุณ สีพื้นหลังจะเปลี่ยนเป็นสีแดงทันที
ตรวจสอบการสาธิตโค้ด
สำหรับค่าสี คุณสามารถใช้ชื่อจริง (เช่น "สีแดง"), ฐานสิบหก หรือ rgba ค่า
