Tìm hiểu cách thay đổi màu nền trên trang web khi bạn di chuột qua nó, với JavaScript vani.
HTML
Dưới đây là một số đánh dấu cho một trang HTML đơn giản:
<!DOCTYPE html>
<html>
<body>
<h1>Move your move over this page</h1>
</body>
</html>
JavaScript
Để thay đổi màu nền khi người dùng di chuyển chuột qua bất kỳ phần nào của trang, bạn cần:
- Nhắm mục tiêu
<body>
và lưu trữ một tham chiếu đến nó trong một biến. - Trình xử lý sự kiện trên
window
đối tượng lắng nghemouseover
sự kiện. - Áp dụng
backgroundColor
thuộc tính có giá trị màu.
Thêm mã sau vào tệp JavaScript của bạn:
const bodyElement = document.querySelector("body")
window.addEventListener("mouseover", function() {
bodyElement.style.backgroundColor = "red"
})
Giờ đây, ngay khi người dùng di chuột qua bất kỳ phần nào trên trang web của bạn, màu nền ngay lập tức chuyển sang màu đỏ.
Kiểm tra bản demo mã.
Đối với các giá trị màu, bạn có thể sử dụng tên thật (như "đỏ"), hex hoặc rgba giá trị.