Thay đổi kiểu css khi nhấp

Thử nó

Lớp giả

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

Các kiểu được xác định bởi lớp giả

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

Ghi chú. Trên các hệ thống có chuột nhiều nút, CSS chỉ định rằng lớp giả

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

Biến trạng thái

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

Chúng tôi đặt trình xử lý sự kiện

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

handleClick() {
  this.active = true

  // this.active = !this.active
},

Ghi chú

Để ngăn kiểu thay đổi mỗi khi nhấp vào phần tử, chúng ta có thể đặt biến trạng thái thành

handleClick() {
  this.active = true

  // this.active = !this.active
},

handleClick() {
  this.active = true

  // this.active = !this.active
},

Chúng tôi đã sử dụng các toán tử bậc ba để đặt kiểu

handleClick() {
  this.active = true

  // this.active = !this.active
},

handleClick() {
  this.active = true

  // this.active = !this.active
},

Toán tử bậc ba hoạt động giống như một câu lệnh

handleClick() {
  this.active = true

  // this.active = !this.active
},

handleClick() {
  this.active = true

  // this.active = !this.active
},

handleClick() {
  this.active = true

  // this.active = !this.active
},

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

Vì vậy, nếu biến

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

handleClick() {
  this.active = true

  // this.active = !this.active
},

handleClick() {
  this.active = true

  // this.active = !this.active
},

handleClick() {
  this.active = true

  // this.active = !this.active
},

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

Đăng ký bản tin Coding Beauty

Có được những hiểu biết hữu ích và nâng cao kiến ​​thức phát triển web của bạn với các mẹo và hướng dẫn hàng tuần từ Coding Beauty. Hơn 1.400 nhà phát triển đăng ký

Thay đổi kiểu phần tử khi nhấp với các lớp

Để thay đổi kiểu của một phần tử khi nhấp chuột trong Vue, chúng ta cũng có thể tạo các lớp chứa các kiểu thay thế và đặt chúng theo điều kiện thành giá trị

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

Ví dụ

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

Chúng tôi tạo hai lớp (

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

handleClick() {
  this.active = true

  // this.active = !this.active
},

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

Ưu điểm của việc sử dụng các lớp là chúng ta có thể tách biệt rõ ràng các kiểu khỏi đánh dấu mẫu. Ngoài ra, chúng ta chỉ cần sử dụng một toán tử bậc ba

Thay đổi kiểu phần tử khi nhấp bằng

This paragraph contains a link: This link will turn red while you click on it. The paragraph will get a gray background while you click on it or the link.

35

Có nhiều cách khác để thay đổi kiểu của một phần tử trong Vue mà không cần sử dụng biến trạng thái

Với các lớp được định nghĩa, chúng ta có thể sử dụng thuộc tính

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

Ví dụ

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

Lần này chúng tôi không sử dụng biến trạng thái, vì vậy chúng tôi thêm lớp

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

Trình lắng nghe sự kiện

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

Thuộc tính currentTarget của đối tượng này trả về phần tử đã được nhấp và có trình xử lý sự kiện được đính kèm

Chúng tôi gọi classList. remove() trên phần tử để loại bỏ lớp

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

Lưu ý rằng kiểu của phần tử không thay đổi nữa sau khi được nhấp một lần. Nếu bạn muốn chuyển đổi kiểu bất cứ khi nào nó được nhấp vào, bạn có thể sử dụng lớp

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

<p>
  This paragraph contains a link:
  <a href="#">This link will turn red while you click on it.a>
  The paragraph will get a gray background while you click on it or the link.
p>

Danh sách lớp. phương thức toggle() loại bỏ một lớp khỏi một phần tử nếu nó hiện diện. Mặt khác, nó thêm lớp vào phần tử

Mọi điều điên rồ mà JavaScript làm

Hướng dẫn hấp dẫn về những cảnh báo tinh tế và những phần ít được biết đến của JavaScript

Đăng ký và nhận ngay một bản sao miễn phí

Ayibatari Ibaba

Ayibatari Ibaba là nhà phát triển phần mềm có nhiều năm kinh nghiệm xây dựng trang web và ứng dụng. Anh ấy đã viết rất nhiều về nhiều chủ đề lập trình và đã tạo ra hàng chục ứng dụng và thư viện mã nguồn mở

Làm cách nào để thay đổi CSS khi nhấp bằng CSS?

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

Làm cách nào để thêm CSS trên OnClick?

Làm cách nào để thay đổi CSS bằng chức năng JavaScript?