Lớp giả CSS
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.
6 đại diện cho một phần tử [chẳng hạn như nút] đang được người dùng kích hoạt. Khi sử dụng chuột, "kích hoạt" thường bắt đầu khi người dùng nhấn nút chuột chínhThử nó
Lớp giả
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.
6 thường được sử dụng trên các phần tử
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.
8 và
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.
9. Các mục tiêu phổ biến khác của lớp giả này bao gồm các phần tử được chứa trong một phần tử được kích hoạt và các phần tử biểu mẫu đang được kích hoạt thông qua
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.
0 được liên kết của chúngCác kiểu được xác định bởi lớp giả
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.
6 sẽ bị ghi đè bởi bất kỳ lớp giả nào liên quan đến liên kết tiếp theo [
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.
1,
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.
2 hoặc
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.
3] có tính đặc hiệu ít nhất bằng nhau. Để tạo kiểu liên kết phù hợp, hãy đặt quy tắc
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.
6 sau tất cả các quy tắc liên quan đến liên kết khác, như được xác định theo thứ tự LVHA.
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.
1 —
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.
3 —
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.
2 —
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.
6Ghi chú. Trên các hệ thống có chuột nhiều nút, CSS chỉ định rằng lớp giả
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.
6 chỉ được áp dụng cho nút chính; Biến trạng thái
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.
5 xác định kiểu sẽ được áp dụng cho phần tử. Khi là
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.
6 [mặc định], một kiểu nhất định sẽ được áp dụngChúng tôi đặt trình xử lý sự kiện
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.
7 trên phần tử để trình xử lý sẽ được gọi khi nhấp vào. Lần đầu tiên trình xử lý này được gọi, biến
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.
5 được chuyển thành handleClick[] {
this.active = true
// this.active = !this.active
},
2, làm thay đổi kiểu của phần tử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
},
2, thay vì bật tắt nó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
},
4 và handleClick[] {
this.active = true
// this.active = !this.active
},
5 trên phần tử một cách có điều kiệnToá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
},
6. Nó trả về giá trị trước handleClick[] {
this.active = true
// this.active = !this.active
},
7 nếu đó là sự thật. Mặt khác, nó trả về giá trị ở bên trái của handleClick[] {
this.active = true
// this.active = !this.active
},
8
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.
4Vì vậy, nếu biến
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.
5 là handleClick[] {
this.active = true
// this.active = !this.active
},
2, thì handleClick[] {
this.active = true
// this.active = !this.active
},
4 và handleClick[] {
this.active = true
// this.active = !this.active
},
5 được đặt thành
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.
43 và
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.
44 tương ứng. Mặt khác, chúng được đặt thành
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.
45 và
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.
43 tương ứngĐă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ị
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.
47 của phần tử, tùy thuộc vào giá trị của biến trạng thái booleanVí dụ
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.
0
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.
3Chúng tôi tạo hai lớp [
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.
5 và
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.
30] với các kiểu khác nhau, sau đó chúng tôi sử dụng toán tử bậc ba để thêm lớp
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.
5 nếu biến
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.
5 là handleClick[] {
this.active = true
// this.active = !this.active
},
2 và thêm lớp
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.
30 nếu ngược lạiƯ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
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.
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
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.
36 của đối tượ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.
37 được truyền cho trình xử lý sự kiện
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.
7 để thay đổi kiểu của phần tửVí dụ
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.
0
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.
0Lầ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
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.
30 vào phần tử để tùy chỉnh giao diện mặc định của nóTrình lắng nghe sự kiện
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.
7 nhận một đối tượ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.
37 được sử dụng để truy cập thông tin và thực hiện các hành động liên quan đến sự kiện nhấp chuộtThuộ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
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.
30, sau đó chúng ta gọi classList. add[] trên đó để thêm lớp
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.
5Lư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
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.
05 của phần tử để thay thế các lớp trên phần tử
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.
0
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.
5Danh 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ở