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

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

Tìm hiểu cách chuyển đổi màu nền trên trang web khi bạn di chuyển chuột vào bên trong và bên ngoài trang web đó bằng cách sử dụng mouseover của JavaScript và mouseout sự kiện.

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>

Bạn có thể sử dụng một trình soạn thảo văn bản trực tuyến miễn phí như CodePen để làm theo hướng dẫn này.

JavaScript

Để chuyển đổi màu nền trang web khi người dùng di chuột qua và ra ngoài khung trang web, 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.
  • Thiết lập trình xử lý sự kiện trên window đối tượng lắng nghe hai loại sự kiện, mouseover và mouseout
  • Chuyển đổi backgroundColor thuộc tính có hai giá trị màu.

Lưu trữ tham chiếu đến phần tử body

Trước tiên, bạn cần lưu trữ một tham chiếu đến <body> của trang web của bạn phần tử bao bọc tất cả nội dung trên một trang web:

const bodyElement = document.querySelector("body")

Thiết lập sự kiện “khi di chuột qua”

Bây giờ, hãy thiết lập một sự kiện lắng nghe khi người dùng di chuyển chuột qua một trang, sau đó thực thi một chức năng thay đổi màu nền thành re. Thêm mã sau vào tệp JavaScript của bạn:

const bodyElement = document.querySelector("body")

// New code
window.addEventListener("mouseover", function() {
  bodyElement.style.backgroundColor = "red"
})

Tuyệt vời, điều đó hoạt động!

Thiết lập sự kiện "khi di chuột ra"

Vậy làm cách nào để thay đổi màu nền trở lại màu trắng mặc định khi người dùng di chuyển chuột ra ngoài khung trang web một lần nữa?

Bạn chỉ có thể sao chép sự kiện cửa sổ từ bên trên và thay thế mouseover với mouseout và backgroundColor thành "white" .

Sau đó, mã của bạn sẽ giống như sau:

const bodyElement = document.querySelector("body")

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

// New code
window.addEventListener("mouseover", function() {
  bodyElement.style.backgroundColor = "white"
})

Nó hoạt động!

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

Rất tiếc, chúng tôi không thể thêm nhiều sự kiện vào một trình xử lý sự kiện duy nhất (không giống như với jQuery), điều này sẽ làm cho mã ít thừa hơn.

Tuy nhiên, thay vào đó, chúng ta có thể thiết lập hai hàm được đặt tên và chuyển mỗi hàm vào trình xử lý sự kiện cửa sổ, như sau:

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 có thể thấy, nó hoạt động giống như trước đây.

Đã tái cấu trúc đoạn mã trên rõ ràng hơn một chút, theo nghĩa là nó tuân theo các nguyên tắc chung của JavaScript về việc không sử dụng các hàm không tên (ẩn danh).

Mã này cũng có thể sử dụng lại vì bây giờ bạn có thể gọi hai người có tên các chức năng từ bất kỳ loại trình xử lý sự kiện nào, thực tế trong nhiều trường hợp.

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