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
Đ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 CSS
jQuery 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ắt
Xem xét nội dung HTML sau với các lớp CSS được xác định
jQuery addClass[] Method
Hello
Goodbye
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
jQuery addClass[] Method
Hello
Goodbye
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 addClass[] Method
Hello
Goodbye
Add Class
jQuery - Xóa các lớp CSS
jQuery 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ắt
Xem 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"];0
Thí dụ
Hãy thử ví dụ sau và kiểm chứng kết quả
$[selector].addClass["Class1 Class2"];1
jQuery - Chuyển đổi các lớp CSS
jQuery 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"];2
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ẽ đượ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"];3
Tài liệu tham khảo HTML/CSS jQuery
Bạ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 JavaScript
Thuộ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 class
cho phần tử div và thay thế các lớp hiện có của nó, nếu có.
JS
1
tài liệu. getElementById["vùng chứa"].tên lớp = "chính";
CSS
1
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;
}
HTML
1
Chỉnh sửa trong JSFiddle
Để thêm một lớp vào một phần tử thay vì thay thế các lớp hiện có của nó, hãy sử dụng toán tử +=
để thay thế. Lưu ý, điều quan trọng là phải thêm dấu cách vào trước classname
mới;
JS
1
2
var div = tài liệu. getElementById["vùng chứa"];
div. tên lớp += " đường viền";
CSS
1
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;
}
HTML
1
Chỉnh sửa trong JSFiddle
Để áp dụng nhiều lớp, hãy chỉ định danh sách các tên lớp được phân tách bằng dấu cách cho thuộc tính className
JS
1
tài liệu. getElementById["vùng chứa"].tên lớp = "đường viền thứ nguyên";
CSS
1
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;
}
HTML
1
Chỉnh sửa trong JSFiddle
2. Sử dụng thuộc tính classList
của JavaScript
Thuộ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 add[]
và remove[]
. Phương thức add[]
thêm một lớp vào danh sách.
JS
1
tài liệu. getElementById["vùng chứa"].Danh sách lớp học. thêm["chính"];
CSS
1
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;
}
HTML
1
Chỉnh sửa trong JSFiddle
Để xóa một lớp, bạn có thể sử dụng phương thức element.classList.remove[]
JS
1
tài liệu. getElementById["vùng chứa"].Danh sách lớp học. xóa["chính"];
CSS
1
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;
}
HTML
1
Chỉnh sửa trong JSFiddle
3. Sử dụng phương thức class
0 của jQuery
Nế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 class
của phần tử.
jQuery
1
2
3
$[tài liệu]. sẵn sàng[chức năng[] {
$["#container"].addClass["chính"];
}];
CSS
1
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;
}
HTML
1
Chỉnh sửa trong JSFiddle
4. Sử dụng phương thức class
2 của jQuery
Ngoà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 class
3 của phần tử.
jQuery
1
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];
}];
HTML
1
Chỉnh sửa trong JSFiddle
Lưu ý rằng trừ khi các giá trị của thuộc tính CSS được tạo động, bạn nên sử dụng các lớp thay thế
Đó 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