Hướng dẫn how do you change the background when a button is clicked html? - làm thế nào để bạn thay đổi nền khi một nút được nhấp vào html?

Question

Mục lục #

Thay đổi màu nền của trang khi nhấp vào nhấp chuột
Thay đổi màu nền của các yếu tố khi nhấp vào nhấp chuột
Thay đổi màu nền của phần tử khác khi nhấp vào nhấp chuột

Thay đổi màu nền của các trang khi nhấp vào #

Để thay đổi màu nền của trang trên nhấp chuột:

Nội dung chính Show

Mục lục #
Thay đổi màu nền của các trang khi nhấp vào #
Thay đổi màu nền của phần tử trên nhấp chuột #
Thay đổi màu nền của phần tử khác trên nhấp chuột #
Làm cách nào để thay đổi màu nền của nút nhấp chuột?
Làm cách nào để thay đổi màu của nút nhấp vào HTML?
Làm cách nào để thay đổi màu nền tự động trong HTML?
Làm cách nào để thay đổi nền trong mã HTML?

Thêm trình nghe sự kiện click vào một phần tử.
Mỗi lần nhấp vào phần tử, đặt thuộc tính document.body.style.backgroundColor thành một màu cụ thể.

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

Copied!
DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  head>

  <body>
    <div id="box">Some text herediv>
    <button id="btn">Buttonbutton>

    <script src="index.js">script>
  body>
html>

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

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', function onClick(event) {
  // 👇️ change background color
  document.body.style.backgroundColor = 'salmon';

  // 👇️ optionally change text color
  // document.body.style.color = 'white';
});

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

Mỗi lần nhấp vào nút, chúng tôi đặt thuộc tính document.body.style.backgroundColor thành

Copied!



const btn = document.getElementById('btn');
btn.addEventListener('click', function onClick(event) {
// 👇️ change background color
document.body.style.backgroundColor = 'salmon';
// 👇️ optionally change text color
// document.body.style.color = 'white';
});

0 và thay đổi màu nền của trang.

Thay đổi màu nền của phần tử trên nhấp chuột #

Để thay đổi màu nền của một phần tử trên nhấp chuột:

Thêm trình nghe sự kiện click vào phần tử.

Gán đối tượng

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', function onClick(event) {
  // 👇️ change background color
  document.body.style.backgroundColor = 'salmon';

  // 👇️ optionally change text color
  // document.body.style.color = 'white';
});

2 cho một biến trong hàm.

Đặt thuộc tính

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', function onClick(event) {
  // 👇️ change background color
  document.body.style.backgroundColor = 'salmon';

  // 👇️ optionally change text color
  // document.body.style.color = 'white';
});

3 thành màu nền cụ thể.

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', function onClick(event) {
  // 👇️ change background color
  event.target.style.backgroundColor = 'salmon';

  // 👇️ optionally change text color
  // event.target.style.color = 'white';
});

Hướng dẫn how do you change the background when a button is clicked html? - làm thế nào để bạn thay đổi nền khi một nút được nhấp vào html?

Mỗi lần nhấp vào nút từ ví dụ, màu nền của riêng nó được đặt.

Chúng tôi đã sử dụng thuộc tính đích trên đối tượng

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', function onClick(event) {
  // 👇️ change background color
  document.body.style.backgroundColor = 'salmon';

  // 👇️ optionally change text color
  // document.body.style.color = 'white';
});

2. Thuộc tính

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', function onClick(event) {
  // 👇️ change background color
  document.body.style.backgroundColor = 'salmon';

  // 👇️ optionally change text color
  // document.body.style.color = 'white';
});

5 là một tham chiếu đến đối tượng (phần tử) mà sự kiện được gửi đi.

Nói cách khác,

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', function onClick(event) {
  // 👇️ change background color
  document.body.style.backgroundColor = 'salmon';

  // 👇️ optionally change text color
  // document.body.style.color = 'white';
});

6 cho phép chúng tôi truy cập vào phần tử DOM mà người dùng đã nhấp.

Bạn có thể

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', function onClick(event) {
  // 👇️ change background color
  document.body.style.backgroundColor = 'salmon';

  // 👇️ optionally change text color
  // document.body.style.color = 'white';
});

7 thuộc tính

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', function onClick(event) {
  // 👇️ change background color
  document.body.style.backgroundColor = 'salmon';

  // 👇️ optionally change text color
  // document.body.style.color = 'white';
});

5 để xem phần tử DOM được người dùng nhấp vào.

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', function onClick(event) {
  console.log(event.target);

  // 👇️ change background color
  event.target.style.backgroundColor = 'salmon';

  // 👇️ optionally change text color
  // event.target.style.color = 'white';
});

Nếu bạn nhấp vào nút và xem đầu ra

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', function onClick(event) {
  // 👇️ change background color
  document.body.style.backgroundColor = 'salmon';

  // 👇️ optionally change text color
  // document.body.style.color = 'white';
});

9 của bạn, bạn sẽ thấy phần tử

Copied!



const btn = document.getElementById('btn');
btn.addEventListener('click', function onClick(event) {
// 👇️ change background color
event.target.style.backgroundColor = 'salmon';
// 👇️ optionally change text color
// event.target.style.color = 'white';
});

0 được ghi lại.

Thay đổi màu nền của phần tử khác trên nhấp chuột #

Để thay đổi màu nền của phần tử khác trên nhấp chuột:

Thêm trình nghe sự kiện click cho một trong các yếu tố.

Mỗi lần nhấp vào phần tử, thay đổi thuộc tính

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', function onClick(event) {
  // 👇️ change background color
  event.target.style.backgroundColor = 'salmon';

  // 👇️ optionally change text color
  // event.target.style.color = 'white';
});

2 của phần tử khác.

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

Copied!
DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  head>

  <body>
    <div id="box">Some text herediv>
    <button id="btn">Buttonbutton>

    <script src="index.js">script>
  body>
html>

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

Copied!
const btn = document.getElementById('btn');

btn.addEventListener('click', function onClick(event) {
  const box = document.getElementById('box');

  box.style.backgroundColor = 'coral';

  // 👇️ optionally change text color
  // box.style.color = 'white';
});

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

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

Để thay đổi màu nền của một phần tử trên nhấp chuột:..

Thêm trình nghe sự kiện nhấp vào phần tử ..

Gán đối tượng sự kiện cho một biến trong hàm ..

Đặt sự kiện.Mục tiêu.Phong cách.thuộc tính boardpresscolor cho màu nền cụ thể ..

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

Để thay đổi màu của nút mỗi khi nhấp vào: 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 boundationColor cho một giá trị mới.Sử dụng một biến chỉ mục để theo dõi các màu hiện tại và tiếp theo.Add a click event listener to the button. Each time the button is clicked, set its style. backgroundColor property to a new value. Use an index variable to track the current and next colors.

Làm cách nào để thay đổi màu nền tự động trong HTML?

Bạn có thể đặt màu nền cho tài liệu HTML bằng cách thêm style = "màu nền:" vào phần tử.adding style="background-color:" to the element.

Làm cách nào để thay đổi nền trong mã HTML?

Để thêm màu nền trong HTML, hãy sử dụng thuộc tính màu nền CSS.Đặt nó thành tên màu hoặc mã bạn muốn và đặt nó bên trong thuộc tính kiểu.Sau đó thêm thuộc tính kiểu này vào phần tử HTML, như bảng, tiêu đề, div hoặc thẻ span.use the CSS background-color property. Set it to the color name or code you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a table, heading, div, or span tag.

programming html Button blue html CSS Button

Hướng dẫn how do you change the background when a button is clicked html? - làm thế nào để bạn thay đổi nền khi một nút được nhấp vào html?

Mục lục #

Thay đổi màu nền của các trang khi nhấp vào #

Thay đổi màu nền của phần tử trên nhấp chuột #

Thay đổi màu nền của phần tử khác trên nhấp chuột #

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

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

Làm cách nào để thay đổi màu nền tự động trong HTML?

Làm cách nào để thay đổi nền trong mã HTML?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội