Làm cách nào để thêm CSS vào lớp hiện có bằng jQuery?
|
Phương thức addClass() thêm một hoặc nhiều tên lớp vào các phần tử đã chọn. Phương thức này không xóa các thuộc tính lớp hiện có, nó chỉ thêm một hoặc nhiều tên lớp vào thuộc tính lớp Show
Đoạn mã trên thêm hai lớp cho phần tử p và div và thay đổi nền khi nhấp vào nút phương thức removeClass()removeClass() cho phép bạn xóa một lớp, nhiều lớp hoặc tất cả các lớp khỏi mỗi phần tử trong tập hợp các phần tử phù hợp Đoạn mã trên loại bỏ hai lớp cho phần tử p và div và thay đổi nền khi nhấp vào nút jQuery cung cấp ba phương thức addClass(), removeClass() và toggleClass() để thao tác với các lớp CSS của các phần tử Chúng tôi đã chia cuộc thảo luận về thao tác CSS thành hai phần. Chương này sẽ thảo luận về thao tác với các lớp CSS và chương tiếp theo sẽ thảo luận về thao tác với các thuộc tính CSS jQuery - Thêm các lớp CSSjQuery cung cấp phương thức addClass() để thêm một lớp CSS vào (các) phần tử HTML phù hợp. Sau đây là cú pháp của phương thức addClass() $(selector).addClass(className); Phương thức này nhận một tham số là một hoặc nhiều lớp được phân tách bằng dấu cách để thêm vào thuộc tính lớp của từng phần tử khớp. Có thể thêm nhiều lớp cùng một lúc, được phân tách bằng dấu cách, vào tập hợp các phần tử phù hợp, như vậy $(selector).addClass("Class1 Class2");
Tóm tắtXem xét nội dung HTML sau với các lớp CSS được xác định
Bây giờ nếu chúng ta sử dụng phương thức addClass() như sau $( ".hello" ).addClass("big" );
$( ".goodbye" ).addClass("small" );
Nó sẽ tạo ra kết quả sau
Xin lưu ý rằng phương thức addClass() không thay thế một lớp hiện có, thay vào đó, nó chỉ đơn giản là thêm lớp, nối nó vào bất kỳ lớp nào có thể đã được gán cho các phần tử Thí dụHãy thử ví dụ sau và kiểm chứng kết quả The jQuery Example jQuery - Xóa các lớp CSSjQuery cung cấp phương thức removeClass() để xóa một lớp CSS hiện có khỏi (các) phần tử HTML phù hợp. Sau đây là cú pháp của phương thức removeClass() $(selector).removeClass(className); Phương thức này nhận một tham số là một hoặc nhiều lớp được phân tách bằng dấu cách sẽ bị xóa khỏi thuộc tính lớp của từng phần tử phù hợp. Nhiều lớp có thể bị xóa cùng một lúc, được phân tách bằng dấu cách, khỏi tập hợp các phần tử phù hợp, như vậy $(selector).removeClass("Class1 Class2");
Tóm tắtXem xét nội dung HTML sau với các lớp CSS được xác định ________số 8_______Bây giờ nếu chúng ta sử dụng phương thức removeClass() như sau $( ".hello" ).removeClass("big" );
$( ".goodbye" ).removeClass("small" );
Nó sẽ tạo ra kết quả sau $(selector).addClass("Class1 Class2");
0Thí dụHãy thử ví dụ sau và kiểm chứng kết quả $(selector).addClass("Class1 Class2");
1jQuery - Chuyển đổi các lớp CSSjQuery cung cấp phương thức toggleClass() để chuyển đổi một lớp CSS trên (các) phần tử HTML phù hợp. Sau đây là cú pháp của phương thức toggleClass() $(selector).addClass("Class1 Class2");
2Phương thức này nhận một tham số là một hoặc nhiều lớp được phân tách bằng dấu cách sẽ được bật. Nếu một phần tử trong tập hợp các phần tử phù hợp đã có lớp, thì phần tử đó sẽ bị xóa; Thí dụHãy thử ví dụ sau và kiểm chứng kết quả $(selector).addClass("Class1 Class2");
3Tài liệu tham khảo HTML/CSS jQueryBạn có thể tham khảo đầy đủ tất cả các Phương thức jQuery để thao tác nội dung CSS và HTML tại trang sau. Tài liệu tham khảo HTML/CSS jQuery Bài đăng này sẽ thảo luận về cách thêm lớp CSS vào phần tử HTML bằng JavaScript và jQuery 1. Sử dụng thuộc tính className của JavaScriptThuộc tính className thường được sử dụng để đặt giá trị cho thuộc tính lớp của một phần tử trong JavaScript thuần túy. Đoạn mã sau thể hiện điều này bằng cách đặt thuộc tính JS1 tài liệu. getElementById("vùng chứa").tên lớp = "chính"; CSS1 2 3 4 5 .main { chiều rộng. 500px; chiều cao. 300px; đường viền. 1px màu đặc màu xanh lam; } HTML1 Chỉnh sửa trong JSFiddle JS1 2 var div = tài liệu. getElementById("vùng chứa"); div. tên lớp += " đường viền"; CSS1 2 3 4 5 6 7 8 .dimensions { chiều rộng. 500px; chiều cao. 300px; }
.border { đường viền. 1px màu đặc màu xanh lam; } HTML1 Chỉnh sửa trong JSFiddle JS1 tài liệu. getElementById("vùng chứa").tên lớp = "đường viền thứ nguyên"; CSS1 2 3 4 5 6 7 8 .dimension { chiều rộng. 500px; chiều cao. 300px; }
.border { đường viền. 1px màu đặc màu xanh lam; } HTML1 Chỉnh sửa trong JSFiddle 2. Sử dụng thuộc tính classList của JavaScriptThuộc tính classList trả về một tập hợp các thuộc tính lớp của phần tử, có thể sửa đổi sau này bằng các phương thức JS1 tài liệu. getElementById("vùng chứa").Danh sách lớp học. thêm("chính"); CSS1 2 3 4 5 .main { chiều rộng. 500px; chiều cao. 300px; đường viền. 1px màu đặc màu xanh lam; } HTML1 Chỉnh sửa trong JSFiddle JS1 tài liệu. getElementById("vùng chứa").Danh sách lớp học. xóa("chính"); CSS1 2 3 4 5 .main { chiều rộng. 500px; chiều cao. 300px; đường viền. 1px màu đặc màu xanh lam; } HTML1 Chỉnh sửa trong JSFiddle 3. Sử dụng phương thức class0 của jQueryNếu bạn đang sử dụng jQuery, bạn có thể sử dụng . addClass() phương pháp thêm lớp đã chỉ định vào một phần tử. Nó hoạt động bằng cách thao tác thuộc tính jQuery1 2 3 $(tài liệu). sẵn sàng(chức năng() { $("#container").addClass("chính"); }); CSS1 2 3 4 5 .main { chiều rộng. 500px; chiều cao. 300px; đường viền. 1px màu đặc màu xanh lam; } HTML1 Chỉnh sửa trong JSFiddle 4. Sử dụng phương thức class2 của jQueryNgoài ra, bạn có thể sử dụng của jQuery. css() để đặt một hoặc nhiều thuộc tính CSS cho một phần tử. Nó hoạt động bằng cách sửa đổi giá trị của thuộc tính jQuery1 2 3 4 5 6 7 8 9 $(tài liệu). sẵn sàng(chức năng() { var kiểu = { màu nền. "#ddd", chiều rộng. "500px", chiều cao. "300px", đường viền. "1px màu đen đặc" }; $("#container").css(kiểu); }); HTML1 Chỉnh sửa trong JSFiddle Đó là tất cả về việc thêm một lớp CSS vào phần tử HTML bằng JavaScript và jQuery Làm cách nào để thêm CSS vào lớp bằng jQuery?jQuery - Nhận và đặt các lớp CSS . addClass() - Thêm một hoặc nhiều lớp vào các phần tử đã chọn removeClass() - Xóa một hoặc nhiều lớp khỏi các phần tử đã chọn toggleClass() - Chuyển đổi giữa việc thêm/xóa các lớp khỏi các phần tử đã chọn css() - Đặt hoặc trả về thuộc tính style Làm cách nào để thêm CSS vào lớp trong JavaScript?Để làm điều đó, trước tiên, chúng tôi tạo một lớp và gán lớp đó cho các phần tử HTML mà chúng tôi muốn áp dụng thuộc tính CSS . Chúng ta có thể sử dụng các thuộc tính className và classList trong JavaScript. Tiếp cận. Thuộc tính className được sử dụng để thêm một lớp trong JavaScript.
Làm cách nào để thêm CSS quan trọng bằng jQuery?Gọi phương thức addClass() trên bộ chọn và chỉ định tên lớp của bạn trong phương thức. . Cú pháp – $( bộ chọn ). addClass(tên lớp); Example |