Thay đổi màu khi nhấp vào html

❮ Thuộc tính sự kiện HTML

Thí dụ

Thực thi JavaScript khi nhấp vào nút

Nhấp vào đây

Tự mình thử »

Thêm các ví dụ "Tự mình thử" bên dưới

---

Định nghĩa và cách sử dụng

Thuộc tính onclick kích hoạt khi nhấp chuột vào phần tử

---

Hỗ trợ trình duyệt

Thuộc tính sự kiệnonclickYes Yes Yes Yes

---

cú pháp

Giá trị thuộc tính

ValueDescriptionscriptTập lệnh được chạy trên onclick

chi tiết kỹ thuật

Thẻ HTML được hỗ trợ. Tất cả các phần tử HTML, NGOẠI TRỪ. , ,
, , ,,,,Tự mình thử »

Thí dụ

Nhấp vào nút để sao chép một số văn bản từ trường nhập liệu sang trường nhập liệu khác

Sao chép văn bản

Tự mình thử »

---

Trang liên quan

Tham chiếu DOM HTML. sự kiện onclick

❮ Thuộc tính sự kiện HTML

Trong JavaScript, chúng tôi thường muốn tạo các trang web tùy chỉnh có nhiều chức năng khác nhau để có một thiết kế hấp dẫn. Chẳng hạn, trong trường hợp thông báo cho người dùng về bất kỳ hoạt động thành công, cảnh báo hoặc thông báo lỗi nào. Trong các trường hợp như vậy, việc thay đổi màu nút khi nhấp trong JavaScript là một tính năng quan trọng để thu hút sự chú ý của người dùng và thông báo trước cho họ về các cảnh báo cụ thể

Bài viết này sẽ thảo luận về các phương pháp để thay đổi màu của một nút khi nhấp chuột trong JavaScript

Làm cách nào để thay đổi màu của nút khi nhấp trong JavaScript?

Để thay đổi màu của nút màu khi nhấp chuột trong JavaScript, “kiểu. thuộc tính backgroundColor” có thể được sử dụng với

• sự kiện onclick
• "lập chỉ mục"
• “phương thức querySelector()

 

Bây giờ chúng ta sẽ lần lượt đi qua từng phương pháp được liệt kê

Phương pháp 1. Thay đổi màu nút khi nhấp vào trong JavaScript bằng sự kiện “onclick”

phong cách. thuộc tính backgroundColor điều chỉnh màu nền của phần tử được chỉ định bằng cách sử dụng mã màu. Nó được áp dụng để đặt màu đối với các giá trị Đỏ, Xanh lục và Xanh lam (RGB). Cụ thể hơn, bạn có thể sử dụng “onclick” theo cách mà khi nhấp vào một nút, mã màu được thêm vào sẽ được áp dụng làm nền của nó

Ví dụ sau giải thích rõ khái niệm đã nêu

Thí dụ

Đầu tiên, tạo một nút có id “nút”. Sau đó, thêm sự kiện “onclick” sẽ kích hoạt chức năng “buttonColor()” khi nhấp vào nút đã thêm

Tiếp theo, khai báo một hàm tên là “buttonColor()”. Theo định nghĩa của nó, truy cập nút bằng tài liệu. getElementById() và áp dụng kiểu. thuộc tính backgroundColor để đặt màu cho nút. Bạn có thể chỉ định bất kỳ mã màu RGB nào làm nền của nó

Việc thực hiện ở trên sẽ hiển thị đầu ra sau

Bạn muốn đặt nhiều màu nền cho một nút?

Phương pháp 2. Thay đổi màu nút khi nhấp chuột trong JavaScript bằng lập chỉ mục

“Lập chỉ mục” là một kỹ thuật được áp dụng để lặp dọc theo một mảng hoặc liệt kê các mục bằng cách chỉ định chỉ mục của chúng. Nó có thể được áp dụng để xác định một bộ màu và thay đổi màu của nút đối với các phần tử được thêm vào. Cụ thể hơn, bạn có thể đính kèm phương thức addEventListener() theo cách như vậy khi nhấp vào nút;

Nhìn vào ví dụ sau đây để chứng minh

Thí dụ

Đầu tiên, chúng ta sẽ tạo một nút có giá trị “Click Here”

Tiếp theo, nút sẽ được truy cập bằng cách chỉ định id của nó trong tài liệu. phương thức getElementById()

Lúc này, các biến index0 và index1 sẽ được khai báo với giá trị lần lượt là “0” và “1”

Sau đó, một mảng gồm hai màu sẽ được xác định và lưu trữ trong một biến có tên là “colors”

Cuối cùng, một sự kiện “nhấp chuột” sẽ được gắn vào nút đã tạo bằng cách gọi phương thức “addEventListener()”. Điều này sẽ hoạt động theo cách mà khi nhấp vào nút, phương thức buttonColor() sẽ được gọi, phương thức này sẽ thay đổi màu nền theo chỉ mục của các màu được thêm vào trong mảng

Như bạn có thể thấy trong kết quả đã cho, khi nhấp vào nút, màu nền của nó trước tiên được đặt thành “xanh lá cây” sau đó là “xanh dương”

Phương pháp 3. Thay đổi màu nút khi nhấp vào JavaScript bằng cách sử dụng “tài liệu. phương thức querySelector()”

Tài liệu. phương thức querySelector()” tìm nạp phần tử đầu tiên khớp với bộ chọn CSS và phương thức “addEventListener()” bao gồm và áp dụng một sự kiện cụ thể cho một phần tử. Các phương pháp này có thể được sử dụng để truy cập id nút, thêm trình xử lý sự kiện nhấp chuột và đặt màu nền của nút

Nhìn vào ví dụ sau đây để chứng minh

Thí dụ

Trong ví dụ sau, bao gồm một nút có giá trị được chỉ định như đã thảo luận trong các phương pháp trước

Bây giờ, hãy áp dụng tài liệu. phương thức querySelector() để truy cập nút có id “success”

Cuối cùng, áp dụng addEventListener() để thêm một trình xử lý sự kiện có tên là “click” vào nút và đặt màu của nó thành “Light Green” bằng cách sử dụng kiểu. Thuộc tính màu nền

đầu ra

Chúng tôi đã cung cấp các phương pháp đơn giản nhất để thay đổi màu của nút khi nhấp vào trong JavaScript

Sự kết luận

Để thay đổi màu nút trong JavaScript, bạn có thể sử dụng kiểu. thuộc tính backgroundColor với mã màu, là giá trị RGB. Để làm như vậy, hãy gọi tài liệu. getElementById() để truy cập nút đã tạo và sau đó thực hiện các thao tác tiếp theo. Tài liệu. querySelector() cũng được sử dụng cho mục đích tương tự. Hơn nữa, kỹ thuật lập chỉ mục cũng có thể được sử dụng để áp dụng nhiều màu nền. Hướng dẫn này hướng dẫn cách thay đổi màu của nút khi nhấp trong JavaScript

Làm cách nào để thay đổi màu nút trong HTML?

Làm cách nào để thay đổi màu nút khi nhấp trong JavaScript?