Thay đổi kiểu lớp javascript
“CSS-in-JS” đề cập đến một mẫu trong đó CSS được tạo bằng JavaScript thay vì được xác định trong các tệp bên ngoài Lưu ý rằng chức năng này không phải là một phần của React, nhưng được cung cấp bởi các thư viện của bên thứ ba. React không có ý kiến về cách định nghĩa các kiểu; Tôi có thể tạo hoạt ảnh trong React không?React có thể được sử dụng để tăng sức mạnh cho hoạt ảnh. Xem React Transition Group, React Motion, React Spring hoặc Framer Motion chẳng hạn Mã js này phù hợp với tôi cung cấp thay thế tên lớp
Để thêm chỉ cần sử dụng
Để loại bỏ sử dụng
Hy vọng điều này hữu ích cho ai đó Trong bài viết này, chúng ta sẽ tìm hiểu cách chúng ta có thể thay đổi kiểu/lớp của một phần tử. Nếu bạn muốn xây dựng một trang web hoặc ứng dụng thú vị thì giao diện người dùng đóng một vai trò quan trọng. Chúng tôi có thể thay đổi, thêm hoặc xóa bất kỳ thuộc tính CSS nào khỏi phần tử HTML khi xảy ra bất kỳ sự kiện nào với sự trợ giúp của JavaScript. Có hai cách tiếp cận cho phép chúng tôi đạt được nhiệm vụ này Cách tiếp cận 1. Thay đổi CSS với sự trợ giúp của thuộc tính style cú pháp document.getElementById("id").style.property = new_style Example: In this example, we have built a PAN number validator. First, we will take the input value and match it with a regex pattern. If it matches then using JavaScript add an inline style on the tag. Otherwise, add a different style on the tag. HTML 53 54 55 56____157 58 59document.getElementById("id").classList0 54____42____159document.getElementById("id").classList4 54document.getElementById("id").classList6 document.getElementById("id").classList7 57document.getElementById("id").classList9 59 01 02_______44____104____46 59document.getElementById("id").classList0 document.getElementById("id").classList4 54 530 59 01 533 01____1535document.getElementById("id").classList4 04 530 59document.getElementById("id").classList0 document.getElementById("id").classList4 54 543 544 543 59document.getElementById("id").classList0 document.getElementById("id").classList4 54 550 551 57 553 554 57 556 557document.getElementById("id").classList4 54____1560 561 560 59document.getElementById("id").classList4 54 566 554 57 569 570 566 59document.getElementById("id").classList0 document.getElementById("id").classList4 54 576 59 01____1579 01____1581 582 583 582____1585document.getElementById("id").classList0 582 588 582 590 591____1592document.getElementById("id").classList0 591____1595 591____1597 582 599 591document.getElementById("id").classList01 document.getElementById("id").classList0 591____1595 591document.getElementById("id").classList06 582document.getElementById("id").classList08 01document.getElementById("id").classList10 document.getElementById("id").classList4 04 576 59 04document.getElementById("id").classList2 59document.getElementById("id").classList0 04 55 59đầu ra Cách tiếp cận 2. Thay đổi chính lớp – Chúng ta có thể sử dụng hai thuộc tính có thể được sử dụng để thao tác với các lớp 1. Thuộc tính classList. ClassList là thuộc tính chỉ đọc trả về tên lớp CSS của một phần tử dưới dạng đối tượng DOMTokenList. cú pháp document.getElementById("id").classList Bạn có thể sử dụng các phương thức được đề cập bên dưới để thêm lớp, xóa lớp và chuyển đổi giữa các lớp khác nhau một cách tương ứng
Ví dụ HTML 53 54 55 56____157 58 59document.getElementById("id").classList0 54____431____159_______44____154____47 59 01document.getElementById("id").classList38 582document.getElementById("id").classList40 01document.getElementById("id").classList08 document.getElementById("id").classList0 01document.getElementById("id").classList45 582document.getElementById("id").classList47 01document.getElementById("id").classList08 document.getElementById("id").classList4 04document.getElementById("id").classList7 59 04document.getElementById("id").classList31 59document.getElementById("id").classList0 54____42____159document.getElementById("id").classList4 54document.getElementById("id").classList6 document.getElementById("id").classList7 57document.getElementById("id").classList9 59 01 02_______44____104____46 59document.getElementById("id").classList74 document.getElementById("id").classList4 54 530 59 01 533 01____1535document.getElementById("id").classList4 04 530 59document.getElementById("id").classList74 document.getElementById("id").classList4 54document.getElementById("id").classList90 document.getElementById("id").classList91 document.getElementById("id").classList90 59document.getElementById("id").classList74 document.getElementById("id").classList4 54____1560 59 01 000 01 002 01 004 01 006 01 008 01 010 01 012 01 014document.getElementById("id").classList4 04 560 59document.getElementById("id").classList74 document.getElementById("id").classList4 54 566 554 57 025 026 566 59document.getElementById("id").classList4 54 566 554 57 034 035 566 59document.getElementById("id").classList4 54 566 554 57 043 044 566 59document.getElementById("id").classList0 document.getElementById("id").classList4 54 576 59 01 053 01 055 01 057document.getElementById("id").classList0 01____1585 01 062 582 064 01document.getElementById("id").classList10 document.getElementById("id").classList0 01 069 582 071 01document.getElementById("id").classList10 document.getElementById("id").classList0 01 076 582 078 01document.getElementById("id").classList10 document.getElementById("id").classList4 04 576 59 04document.getElementById("id").classList2 59document.getElementById("id").classList0 04 55 59đầu ra. Trong ví dụ trên, chúng ta định nghĩa hai lớp thao tác “hide” và “toggleColor” để ẩn một phần tử và đổi màu thành xanh tương ứng. Khi nhấp vào nút Ẩn, lớp ẩn được thêm vào thẻ “p” để ẩn nó. Khi nhấp vào nút Hiển thị, nó sẽ xóa lớp ẩn hiện tại khỏi thẻ “p”. Khi nhấp vào nút Thay đổi màu, nó sẽ thêm lớp “toggleColor” vào thẻ p (làm cho văn bản có màu xanh lam) và khi được nhấp lại, nó sẽ loại bỏ lớp toggleColor 2. Thuộc tính className. Thuộc tính này được sử dụng để đặt lớp hiện tại của phần tử thành lớp đã chỉ định |