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

Học cách toggle màu nền website khi di chuột vào và ra khỏi trang bằng sự kiện mouseover và mouseout của JavaScript.

HTML

Markup trang HTML đơn giản:

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

Bạn có thể dùng editor online miễn phí như CodePen để theo dõi hướng dẫn.

JavaScript

Để toggle màu nền website khi user di chuột qua và ra khỏi khung trang, cần:

• Target element <body> lưu tham chiếu vào biến.
• Thiết lập event listener trên object window lắng nghe hai event type: mouseover, mouseout.
• Toggle thuộc tính backgroundColor với hai giá trị màu.

Lưu tham chiếu element body

Đầu tiên lưu tham chiếu element <body> của website, bao quanh toàn bộ nội dung:

const bodyElement = document.querySelector("body")

Thiết lập event "on mouseover"

Thiết lập event lắng nghe khi user di chuột qua trang, thực thi function đổi màu nền đỏ. Thêm mã sau vào file JS:

const bodyElement = document.querySelector("body") // Mã mới window.addEventListener("mouseover", function() { bodyElement.style.backgroundColor = "red" })

Tuyệt, hoạt động!

Thiết lập event "on mouseout"

Làm sao đổi màu nền về trắng mặc định khi user di chuột ra khỏi khung trang?

Bạn có thể copy event window từ trên, thay mouseover bằng mouseout, backgroundColor thành "white".

Mã sẽ trông như sau:

const bodyElement = document.querySelector("body") window.addEventListener("mouseover", function() { bodyElement.style.backgroundColor = "red" }) // Mã mới window.addEventListener("mouseover", function() { bodyElement.style.backgroundColor = "white" })

Hoạt động!

Nhưng đây có phải cách tốt nhất giải quyết vấn đề không?

Rất tiếc, chúng ta không thể thêm nhiều event vào một event listener (khác với jQuery), làm code thừa.

Tuy nhiên, có thể thiết lập hai named function truyền mỗi function vào window event listener:

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)

Như bạn thấy, hoạt động giống hệt trước.

Mã refactored trên sạch hơn, tuân thủ hướng dẫn JS chung: không dùng anonymous function.