Hướng dẫn onclick color change in javascript - onclick thay đổi màu sắc trong javascript

Mục lục #

  1. Thay đổi màu của một nút onclick
  2. Thay đổi màu của nút mỗi khi nhấp vào

Thay đổi màu của một nút onclick #

Để thay đổi màu của một nút onclick:

  1. Thêm trình nghe sự kiện click vào nút.
  2. Mỗi lần nhấp vào nút, đặt thuộc tính style.backgroundColor của nó thành một giá trị mới.
  3. Tùy chọn đặt thuộc tính style.color của nó.

Đây là HTML cho các ví dụ trong bài viết này.

Copied!

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> head> <body> <button id="btn">Buttonbutton> <script src="index.js">script> body> html>

Và đây là JavaScript liên quan.

Copied!

const btn = document.getElementById('btn'); btn.addEventListener('click', function onClick() { btn.style.backgroundColor = 'salmon'; btn.style.color = 'white'; });

Hướng dẫn onclick color change in javascript - onclick thay đổi màu sắc trong javascript

Nếu bạn cần thay đổi màu của nút mỗi khi nhấp vào, hãy cuộn xuống tiêu đề tiếp theo.

Chúng tôi đã thêm một trình nghe sự kiện vào nút. Người nghe sự kiện gọi một chức năng mỗi khi nhấp vào nút.

Chúng tôi đã sử dụng thuộc tính style.backgroundColor để thay đổi màu nền của nút và thuộc tính style.color để thay đổi màu phông chữ của nút.

Thay đổi màu của nút mỗi khi nhấp vào #

Để thay đổi màu của nút mỗi khi nhấp vào:

  1. Thêm trình nghe sự kiện click vào nút.
  2. Mỗi lần nhấp vào nút, đặt thuộc tính style.backgroundColor của nó thành một giá trị mới.
  3. Tùy chọn đặt thuộc tính style.color của nó.

Đây là HTML cho các ví dụ trong bài viết này.

Copied!

DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> head> <body> <button id="btn">Buttonbutton> <script src="index.js">script> body> html>

Và đây là JavaScript liên quan.

Copied!

const btn = document.getElementById('btn'); let index = 0; const colors = ['salmon', 'green', 'blue', 'purple']; btn.addEventListener('click', function onClick() { btn.style.backgroundColor = colors[index]; btn.style.color = 'white'; index = index >= colors.length - 1 ? 0 : index + 1; });

Hướng dẫn onclick color change in javascript - onclick thay đổi màu sắc trong javascript

Nếu bạn cần thay đổi màu của nút mỗi khi nhấp vào, hãy cuộn xuống tiêu đề tiếp theo.

Chúng tôi đã thêm một trình nghe sự kiện vào nút. Người nghe sự kiện gọi một chức năng mỗi khi nhấp vào nút.

Chúng tôi đã sử dụng thuộc tính style.backgroundColor để thay đổi màu nền của nút và thuộc tính style.color để thay đổi màu phông chữ của nút.

Thay đổi màu của nút mỗi khi nhấp vào #

Để thay đổi màu của nút mỗi khi nhấp vào:

Sử dụng biến

Copied!

const btn = document.getElementById('btn'); btn.addEventListener('click', function onClick() { btn.style.backgroundColor = 'salmon'; btn.style.color = 'white'; });
1 để theo dõi các màu hiện tại và tiếp theo.

Đây là HTML cho ví dụ này.

Và đây là mã JavaScript liên quan.

Bạn có thể thay đổi màu sắc trong JavaScript không?

Bạn có thể dễ dàng thay đổi màu nền của trang web, tức là phần tử hoặc bất kỳ phần tử nào khác bằng cách sử dụng thuộc tính kiểu của nó trong JavaScript..

Làm thế nào để thay đổi màu nền của nút Nhấp vào trong HTML?

Sử dụng thuộc tính HTML DOM Style BackgroundColor để thay đổi màu nền sau khi nhấp vào nút. Thuộc tính này được sử dụng để đặt màu nền của một phần tử. Ví dụ: Ví dụ này thay đổi màu nền với sự trợ giúp của JavaScript.. This property is used to set the background-color of an element. Example: This example changes the background color with the help of JavaScript.

Làm thế nào để bạn thay đổi màu của nút nhấp chuột trong CSS?

Để thay đổi màu nền của nút, hãy sử dụng thuộc tính màu nền CSS và cung cấp cho nó một giá trị của một màu của sở thích của bạn.Bên trong .Bộ chọn nút, bạn sử dụng màu nền:#0A0A23;Để thay đổi màu nền của nút.use the CSS background-color property and give it a value of a color of your taste. In the . button selector, you use background-color:#0a0a23; to change the background color of the button.

Làm cách nào để thay đổi màu của văn bản khi nhấp vào CSS?

Màu sắc của văn bản đã chọn có thể dễ dàng thay đổi bằng cách sử dụng CSS |:: Lựa chọn chọn.Trong mã dưới đây, chúng tôi đã sử dụng CSS :: Lựa chọn trên và phần tử và đặt màu của nó là màu vàng với nền màu xanh lá cây.using the CSS | ::selection Selector. In the below code, we have used CSS ::selection on

and

element and set its colour as yellow with green background.