เปลี่ยนสีพื้นหลังเว็บไซต์ (on mouseover) ด้วย JavaScript

เรียนรู้เปลี่ยนสีพื้นหลังเว็บเมื่อเลื่อนเมาส์เข้า ด้วย Vanilla JavaScript

HTML

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

JavaScript

เปลี่ยนสีพื้นหลังตอน mouseover:

• Target <body> เก็บในตัวแปร
• Event listener บน window สำหรับ mouseover
• Apply backgroundColor property

const bodyElement = document.querySelector("body");
window.addEventListener("mouseover", function() {
  bodyElement.style.backgroundColor = "red";
});

ตอนเลื่อนเมาส์เข้าหน้าเว็บ สีพื้นหลังจะกลายเป็นแดงทันที

ดู code demo

ค่าสี: ชื่อสีจริง, hex หรือ rgba