Thay đổi nền khi nhấp vào CSS

Cách dễ dàng nhất để chỉnh sửa CSS trong WordPress là sử dụng plugin có tên CSS Hero. Bạn có thể kiểm tra trang web của họ ở đây. Họ cung cấp cách dễ nhất để chỉnh sửa bất kỳ thành phần CSS nào bằng trình tạo trực quan đơn giản. Nó giúp bạn dễ dàng chỉnh sửa CSS mà không cần thực hiện bất kỳ mã hóa nào. Đó là plugin trả phí, nhưng chúng tôi sử dụng plugin cho tất cả các trang web khách hàng của mình. Nó tăng tốc độ phát triển và thiết kế trang web, vì vậy chúng tôi có thể đảm bảo khách hàng của mình nhận được chính xác những gì họ muốn trên trang web của họ.  

rất cảm ơn vì đã theo dõi Hướng dẫn miễn phí của chúng tôi. Nếu bạn yêu thích video clip của chúng tôi, hãy tự tin đăng ký kênh của chúng tôi để nhận các video clip mới hoàn toàn miễn phí

Có một số cách để bạn có thể tự động thay đổi màu nền của Phần tử HTML trong JavaScript

1. Sử dụng phong cách. thuộc tính màu nền

Bạn có thể sử dụng phong cách. backgroundColor trực tiếp trong JavaScript để thay đổi màu nền của phần tử HTML

Ví dụ dưới đây sẽ thay đổi màu nền của phần tử nội dung thành màu đỏ ngay khi tài liệu HTML tải trên trình duyệt

Thao tác này sẽ thay đổi màu nền của toàn bộ trang thành màu đỏ

window.addEventListener('load', () => {
  document.body.style.backgroundColor = 'red';
});

dùng thử

Xem Bút thay đổi màu nền bằng JavaScript #5 – Khi nhấp chuột của SoftAuthor (@softauthor) trên CodePen

Chúng tôi đã thêm trình xử lý 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

  
    
    bobbyhadz.com
  

  
    
Some text here
    Button

    
  

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

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

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

1. Thêm trình xử lý sự kiện click vào phần tử
2. Gán đối tượng

   
   
     
       
       bobbyhadz.com
     
   
     
       
   Some text here
       Button
   
       
     
   
   

   2 cho một biến trong hàm
3. Đặt thuộc tính

   
   
     
       
       bobbyhadz.com
     
   
     
       
   Some text here
   
   
   
   
   Button
   

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

Mỗi khi nhấp vào nút từ ví dụ, màu nền của chính nút đó sẽ được đặt

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

  
    
    bobbyhadz.com
  

  
    
Some text here
    Button

    
  

2. Thuộc tính

  
    
    bobbyhadz.com
  

  
    
Some text here
    Button

    
  

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,

  
    
    bobbyhadz.com
  

  
    
Some text here
    Button

    
  

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

Bạn có thể

  
    
    bobbyhadz.com
  

  
    
Some text here
    Button

    
  

7 thuộc tính

  
    
    bobbyhadz.com
  

  
    
Some text here
    Button

    
  

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

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

  
    
    bobbyhadz.com
  

  
    
Some text here
    Button

    
  

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

  
    
    bobbyhadz.com
  

  
    Button

    
  

0 được ghi lại

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

Để thay đổi màu nền của phần tử khác khi nhấp vào

1. Thêm trình xử lý sự kiện click vào một trong các phần tử
2. Mỗi lần nhấp vào phần tử, hãy thay đổi thuộc tính

   
   
     
       
       bobbyhadz.com
     
   
     
       Button
   
       
     
   
   

   2 của phần tử kia

Đây là HTML cho ví dụ

  
    
    bobbyhadz.com
  

  
    
Some text here




Button

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

Mỗi lần nhấp vào nút, chúng tôi thay đổi màu nền của

  
    
    bobbyhadz.com
  

  
    Button

    
  

3 thành

  
    
    bobbyhadz.com
  

  
    Button

    
  

4

Chuyển đổi màu nền của Phần tử khi nhấp bằng cách sử dụng JS

Để chuyển đổi màu nền của một phần tử khi nhấp chuột

1. Thêm trình xử lý sự kiện click vào phần tử
2. Mỗi lần nhấp vào phần tử, hãy kiểm tra màu nền hiện tại của phần tử và thay đổi nó
3. Sử dụng thuộc tính

   
   
     
       
       bobbyhadz.com
     
   
     
       Button
   
       
     
   
   

   6 để thay đổi màu nền của phần tử

Đây là HTML cho các ví dụ

  
    
    bobbyhadz.com
  

  
    Button

    
  

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

Chúng tôi đã thêm trình xử lý sự kiện click vào phần tử nút, do đó, một chức năng được gọi mỗi khi nhấp vào nút

Trong hàm, chúng tôi kiểm tra xem màu nền hiện tại của phần tử có bằng một giá trị cụ thể hay không và thay đổi nó nếu nó là

Nếu màu nền của phần tử không bằng giá trị ta đặt lại màu nền về giá trị ban đầu

Bạn có thể thêm nhiều điều kiện hơn bằng cách sử dụng câu lệnh

  
    
    bobbyhadz.com
  

  
    Button

    
  

8

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

btn.addEventListener('click', function onClick(event) {
  const backgroundColor = btn.style.backgroundColor;

  if (backgroundColor === 'salmon') {
    btn.style.backgroundColor = 'green';
  } else if (backgroundColor === 'green') {
    btn.style.backgroundColor = 'purple';
  } else {
    btn.style.backgroundColor = 'salmon';
  }
});

Trong ví dụ trên, màu nền của phần tử xen kẽ giữa

  
    
    bobbyhadz.com
  

  
    
Some text here
    Button

    
  

0,

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

btn.addEventListener('click', function onClick(event) {
  const backgroundColor = btn.style.backgroundColor;

  if (backgroundColor === 'salmon') {
    btn.style.backgroundColor = 'green';
  } else if (backgroundColor === 'green') {
    btn.style.backgroundColor = 'purple';
  } else {
    btn.style.backgroundColor = 'salmon';
  }
});

0 và

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

btn.addEventListener('click', function onClick(event) {
  const backgroundColor = btn.style.backgroundColor;

  if (backgroundColor === 'salmon') {
    btn.style.backgroundColor = 'green';
  } else if (backgroundColor === 'green') {
    btn.style.backgroundColor = 'purple';
  } else {
    btn.style.backgroundColor = 'salmon';
  }
});

1

Lưu ý rằng thay vì sử dụng rõ ràng

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

btn.addEventListener('click', function onClick(event) {
  const backgroundColor = btn.style.backgroundColor;

  if (backgroundColor === 'salmon') {
    btn.style.backgroundColor = 'green';
  } else if (backgroundColor === 'green') {
    btn.style.backgroundColor = 'purple';
  } else {
    btn.style.backgroundColor = 'salmon';
  }
});

2, chúng ta có thể sử dụng thuộc tính

  
    
    bobbyhadz.com
  

  
    
Some text here




Button

5 trên đối tượng

  
    
    bobbyhadz.com
  

  
    
Some text here
    Button

    
  

2 để truy cập phần tử mà người dùng đã nhấp vào

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

btn.addEventListener('click', function onClick(event) {
  const backgroundColor = event.target.style.backgroundColor;

  if (backgroundColor === 'salmon') {
    event.target.style.backgroundColor = 'green';
  } else {
    event.target.style.backgroundColor = 'salmon';
  }
});

Trong ví dụ này, chúng ta đã sử dụng thuộc tính target trên đối tượng

  
    
    bobbyhadz.com
  

  
    
Some text here
    Button

    
  

2. Thuộc tính

  
    
    bobbyhadz.com
  

  
    
Some text here
    Button

    
  

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,

  
    
    bobbyhadz.com
  

  
    
Some text here
    Button

    
  

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

Vì trình xử lý sự kiện được thêm vào phần tử nút, nên

  
    
    bobbyhadz.com
  

  
    
Some text here
    Button

    
  

6 trỏ đến nút

Bạn có thể

  
    
    bobbyhadz.com
  

  
    
Some text here
    Button

    
  

7 thuộc tính

  
    
    bobbyhadz.com
  

  
    
Some text here
    Button

    
  

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

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

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

  const backgroundColor = event.target.style.backgroundColor;

  if (backgroundColor === 'salmon') {
    event.target.style.backgroundColor = 'green';
  } else {
    event.target.style.backgroundColor = 'salmon';
  }
});

Sử dụng

  
    
    bobbyhadz.com
  

  
    
Some text here
    Button

    
  

6 chung chung hơn một chút và đặc biệt hữu ích khi thêm các sự kiện vào các phần tử lớn hơn, e. g.

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

btn.addEventListener('click', function onClick(event) {
  const backgroundColor = event.target.style.backgroundColor;

  if (backgroundColor === 'salmon') {
    event.target.style.backgroundColor = 'green';
  } else {
    event.target.style.backgroundColor = 'salmon';
  }
});

2

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

Làm cách nào để thay đổi hình nền khi nhấp vào trong JavaScript?