Computer >> Máy Tính >  >> Lập trình >> Javascript

Cách thay đổi màu nền trên trang web (khi di chuột qua) bằng JavaScript

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 nghe mouseover 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ị.