Hướng dẫn change button background color on button click in javascript - thay đổi màu nền của nút khi nhấp vào nút 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 change button background color on button click in javascript - thay đổi màu nền của nút khi nhấp vào nút 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 change button background color on button click in javascript - thay đổi màu nền của nút khi nhấp vào nút 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.

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

Để 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.use the CSS background-color property and give it a value of a color of your taste.

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

Để thay đổi màu của một nút onclick:..
Thêm trình nghe sự kiện nhấp vào nút ..
Mỗi lần nhấp vào nút, đặt kiểu của nó.thuộc tính boardgroundColor thành một giá trị mới ..
Tùy chọn đặt phong cách của nó.tài sản màu ..

JavaScript có thể thay đổi màu nền không?

Để thay đổi màu nền với JavaScript, bạn có thể áp dụng Style.background hoặc style.backgroundColor trên phần tử bạn muốn thay đổi nền cho.Ví dụ dưới đây thay đổi màu nền của cơ thể khi bạn nhấp vào một phần tử bằng cách sử dụng kiểu.apply style. background or style. backgroundColor on the element you want to change background for. The below example changes the background color of the body when you click an element using style.

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

Để thay đổi màu nút khi nhấp vào CSS, có thể sử dụng CSS: Active Pseudo-Class-Class.Cụ thể hơn, nó có thể biểu thị phần tử nút khi nó được kích hoạt.Sử dụng lớp này, bạn có thể đặt các màu nút khác nhau khi chuột nhấp vào nó.the “:active” pseudo-class can be used. More specifically, it can represent the button element when it gets activated. Using this class, you can set different button colors when the mouse clicks on it.