Cách Thay Đổi Màu Nền Website (Khi Mouseover) Với JavaScript

Học cách thay đổi màu nền website khi di chuột qua, với vanilla JavaScript.

HTML

Markup trang HTML đơn giản:

<!DOCTYPE html> <html> <body> <h1>Di chuột qua trang này</h1> </body> </html>

JavaScript

Để đổi màu nền khi user di chuột qua bất kỳ phần nào của trang, cần:

• Target element <body> lưu tham chiếu vào biến.
• Event listener trên object window lắng nghe event mouseover.
• Áp dụng thuộc tính backgroundColor với giá trị màu.

Thêm mã sau vào file JavaScript:

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

Bây giờ ngay khi user di chuột qua bất kỳ phần nào website, màu nền ngay lập tức thành đỏ.

Xem code demo.

Với giá trị màu bạn có thể dùng tên thật (như "red"), hex hoặc rgba.