JavaScript là tất cả về nội dung động và xử lý các thay đổi CSS động chỉ là một trong những tình huống mà JavaScript chính xác là thứ chúng ta cần
Với JavaScript, chúng tôi có thể đặt kiểu CSS cho một hoặc nhiều thành phần trong DOM, sửa đổi, xóa chúng hoặc thậm chí thay đổi toàn bộ biểu định kiểu cho tất cả trang của bạn
Hãy tìm hiểu những cách khác nhau mà chúng ta có thể đạt được điều này
1. Thay đổi thuộc tính nội tuyến CSS bằng JavaScript
Đặt các kiểu riêng lẻ trực tiếp từ JavaScript là một trong những tình huống phổ biến nhất khi xử lý các kiểu CSS động
Cách này cho phép bạn thay đổi kiểu CSS cho một hoặc nhiều thành phần có trong DOM
Tât cả nhưng điêu bạn phải lam la
- Truy vấn phần tử có trong DOM
- Và đặt kiểu hoặc kiểu cho từng cái một
const element = document.querySelector['.demo'];
element.style.backgroundColor = 'red';
Lưu ý rằng khi thiết lập các kiểu CSS bằng thuộc tính
7, bạn phải viết các thuộc tính CSS trong camelcase. Thay vì sử dụng dấu gạch ngangconst button = document.querySelector['button'];
button.addEventListener['click', [] => {
const element = document.querySelector['.demo'];
element.style.backgroundColor = 'red';
}];8 để phân tách các từ, bạn sẽ phải viết hoa chữ cái đầu tiên của mỗi từ. [const button = document.querySelector['button'];
button.addEventListener['click', [] => {
const element = document.querySelector['.demo'];
element.style.backgroundColor = 'red';
}];9,const button = document.querySelector['button'];
button.addEventListener['click', [] => {
const element = document.querySelector['.demo'];
element.style.backgroundColor = 'red';
}];0].demo{
color: red;
}
Nếu bạn thực thi mã này như thế này, bạn sẽ nhận thấy sự thay đổi diễn ra khi tải trang
Nếu bạn muốn tự động thay đổi kiểu CSS, bạn sẽ phải đính kèm phần mã này vào một số sự kiện
Ví dụ: nếu bạn muốn thay đổi kiểu phần tử của mình khi nhấp vào nút, thì trước tiên bạn phải lắng nghe sự kiện
.demo{
color: red;
}
1 và đính kèm hàm chứa mã trước đóĐây là một ví dụ
const button = document.querySelector['button'];
button.addEventListener['click', [] => {
const element = document.querySelector['.demo'];
element.style.backgroundColor = 'red';
}];
Xem Bút trên CodePen
Lưu ý rằng khi bạn áp dụng các kiểu cụ thể bằng JavaScript, các kiểu này được ưu tiên hơn các kiểu được áp dụng bên ngoài trên biểu định kiểu và thậm chí cho các kiểu được áp dụng nội tuyến, trong chính phần tử HTML
.demo{
color: red;
}
Demo
Ví dụ, trong trường hợp này, chúng ta có một phần tử có kiểu nội tuyến cung cấp cho nó nền màu vàng
Nếu bây giờ chúng ta đặt thuộc tính CSS
.demo{
color: red;
}
2 thành .demo{
color: red;
}
3 bằng JavaScript, thì phần tử của chúng ta sẽ có màu .demo{
color: red;
}
3. Nó sẽ ghi đè kiểu nội tuyến và kiểu được áp dụng trên biểu định kiểu CSS bên ngoàiXem Bút trên CodePen
2. Đặt nhiều kiểu CSS cùng một lúc
Hãy tưởng tượng bạn phải áp dụng, giả sử 5 hoặc 10 kiểu cho một phần tử
Bạn có thể đi từng cái một và có một cái gì đó như sau
const button = document.querySelector['button'];
button.addEventListener['click', [] => {
const element = document.querySelector['.demo'];
element.style.backgroundColor = 'red';
}];
2Nhưng có lẽ bạn đang tìm kiếm một cách "thông minh hơn" để thay đổi tất cả chúng cùng một lúc mà không cần lặp lại mã quá nhiều
Nếu đó là trường hợp, thì tôi có tin tốt cho bạn
Bạn thực sự có thể chuyển một giá trị
.demo{
color: red;
}
5 cho thuộc tính .demo{
color: red;
}
6 để đặt nhiều kiểu CSS cùng một lúcThậm chí tốt hơn, chúng ta có thể sử dụng loại chuỗi ký tự mẫu để tách chúng thành các dòng khác nhau như bạn làm trong biểu định kiểu của mình
const button = document.querySelector['button'];
button.addEventListener['click', [] => {
const element = document.querySelector['.demo'];
element.style.backgroundColor = 'red';
}];
5Xem Bút trên CodePen
Nếu bạn đang tìm hiểu JavaScript, bạn có thể muốn kiểm tra danh sách của chúng tôi với Những cuốn sách hay nhất để học JavaScript hoặc Cách tốt nhất để học JavaScript là gì
2. Thay đổi lớp CSS trong JavaScript
const button = document.querySelector['button'];
button.addEventListener['click', [] => {
const element = document.querySelector['.demo'];
element.style.backgroundColor = 'red';
}];
6const button = document.querySelector['button'];
button.addEventListener['click', [] => {
const element = document.querySelector['.demo'];
element.style.backgroundColor = 'red';
}];
7____18Theo cách tương tự, bạn cũng có thể xóa một số lớp nhất định bằng cách sử dụng
.demo{
color: red;
}
7 hoặc thậm chí chuyển đổi chúng khi sử dụng .demo{
color: red;
}
8Đây là một ví dụ
const button = document.querySelector['button'];
button.addEventListener['click', [] => {
const element = document.querySelector['.demo'];
element.style.backgroundColor = 'red';
}];
1const button = document.querySelector['button'];
button.addEventListener['click', [] => {
const element = document.querySelector['.demo'];
element.style.backgroundColor = 'red';
}];
0Xem Bút trên CodePen
3. Tự động thay đổi biểu định kiểu CSS
Giả sử bây giờ bạn không muốn thêm các kiểu nội tuyến vào một phần tử hoặc áp dụng một lớp cho nó. Thay vào đó, bạn muốn áp dụng thay đổi ở cấp biểu định kiểu. Tại sao?
Có một vài lý do
Bạn có thể muốn áp dụng thay đổi cho tất cả các thành phần bằng một bộ chọn nhất định. Nhưng không chỉ với các phần tử hiện có trên HTML, mà còn với tất cả các phần tử trong tương lai sẽ được thêm động sau này
Có thể có một số lượng lớn các phần tử chia sẻ bộ chọn mà bạn muốn áp dụng các thay đổi cho. Hãy tưởng tượng 500 phần tử chia sẻ bộ chọn của bạn hoặc thậm chí 1K, 5K, 10K. Phải chọn tất cả các phần tử đó bằng JavaScript và sau đó lặp qua chúng để thay đổi kiểu [hoặc thêm lớp] sẽ CỰC KỲ chậm
Đây là nơi trực tiếp sửa đổi biểu định kiểu CSS sẽ hữu ích
Bạn có thể chọn các biểu định kiểu của tài liệu bằng cách sử dụng
.demo{
color: red;
}
9. Nếu bạn biết rằng biểu định kiểu bạn muốn sửa đổi là biểu định kiểu thứ hai, bạn có thể lấy biểu định kiểu đó bằng cách sử dụng
Demo
0Sau đó, bạn sẽ lặp qua tất cả các quy tắc của nó và nhận quy tắc bạn cần sửa đổi. Trong trường hợp này, nếu bạn muốn sửa đổi lớp
Demo
1, bạn có thể so sánh từng bộ chọn của quy tắc với
Demo
1Đây là mã
const button = document.querySelector['button'];
button.addEventListener['click', [] => {
const element = document.querySelector['.demo'];
element.style.backgroundColor = 'red';
}];
1Và đây là ví dụ về Codepen mà bạn có thể chơi với
Xem Bút trên CodePen
4. Tự động thêm và xóa biểu định kiểu CSS
Trong một số trường hợp, chúng tôi có thể muốn thêm một biểu định kiểu hoàn toàn mới hoặc thậm chí thay thế một biểu định kiểu hiện có
Lý do cho nó có thể là
Bạn có một ứng dụng web hỗ trợ nhiều chủ đề và cho phép người dùng thay đổi chúng một cách linh hoạt
Bạn có thể muốn đóng gói một thành phần trong một tệp JS duy nhất thay vì phải bao gồm cả hai tệp, tệp JS và tệp CSS
Cách thức hoạt động của nó khá đơn giản
- 1- Chúng tôi viết nội dung cho biểu định kiểu mới của mình bằng cách sử dụng chữ mẫu
- 2- Chúng tôi chọn phần tử
3 của trang để thêm biểu định kiểu mới của chúng tôi
Demo - 3- Chúng tôi tạo một phần tử biểu định kiểu bằng cách sử dụng
4
Demo - 4- Chúng tôi nối nội dung biểu định kiểu của mình vào phần tử kiểu mới bằng cách sử dụng
5 và
Demo
6
Demo
Đây là mã
const button = document.querySelector['button'];
button.addEventListener['click', [] => {
const element = document.querySelector['.demo'];
element.style.backgroundColor = 'red';
}];
2Và đây là ví dụ về Codepen để bạn có thể tự kiểm tra và sửa đổi một số thứ theo nhu cầu của mình
Xem Bút trên CodePen
5. Ghi đè kiểu CSS
Demo
7 bằng JavaScript
Demo
Chúng ta đều biết quy luật. "Tránh sử dụng. quan trọng". Nhưng này. Đôi khi nó thực sự cần thiết hoặc nó nằm ngoài tầm kiểm soát của chúng ta
Thuộc tính ưu tiên của
Demo
7 đảm bảo rằng kiểu đó sẽ ghi đè bất kỳ kiểu nào được khai báo nội tuyến [được viết trong chính phần tử HTML] cũng như bất kỳ quy tắc nào đã khai báo trước đó áp dụng cho phần tử của bạnVì thế. điều gì xảy ra nếu chúng ta cần ghi đè kiểu đã được khai báo trước đó bằng cách sử dụng
Demo
7?Hãy tưởng tượng chúng ta có phần tử của chúng ta
const button = document.querySelector['button'];
button.addEventListener['click', [] => {
const element = document.querySelector['.demo'];
element.style.backgroundColor = 'red';
}];
3Và biểu định kiểu sử dụng quy tắc
Demo
7 như vậyconst button = document.querySelector['button'];
button.addEventListener['click', [] => {
const element = document.querySelector['.demo'];
element.style.backgroundColor = 'red';
}];
4Tất cả những gì bạn phải làm là áp dụng tham số
const button = document.querySelector['button'];
button.addEventListener['click', [] => {
const element = document.querySelector['.demo'];
element.style.backgroundColor = 'red';
}];
21 trên hàm const button = document.querySelector['button'];
button.addEventListener['click', [] => {
const element = document.querySelector['.demo'];
element.style.backgroundColor = 'red';
}];
22 mà JavaScript cung cấp cho chúng taconst button = document.querySelector['button'];
button.addEventListener['click', [] => {
const element = document.querySelector['.demo'];
element.style.backgroundColor = 'red';
}];
5Đây là một ví dụ
const button = document.querySelector['button'];
button.addEventListener['click', [] => {
const element = document.querySelector['.demo'];
element.style.backgroundColor = 'red';
}];
6Lưu ý khi sử dụng
22, chúng tôi chỉ định chính xác các thuộc tính CSS giống như cách chúng tôi thực hiện trong biểu định kiểu của mình. Sử dụng dấu gạch ngangconst button = document.querySelector['button'];
button.addEventListener['click', [] => {
const element = document.querySelector['.demo'];
element.style.backgroundColor = 'red';
}];8 để phân tách các từ. [const button = document.querySelector['button'];
button.addEventListener['click', [] => {
const element = document.querySelector['.demo'];
element.style.backgroundColor = 'red';
}];25,const button = document.querySelector['button'];
button.addEventListener['click', [] => {
const element = document.querySelector['.demo'];
element.style.backgroundColor = 'red';
}];26]const button = document.querySelector['button'];
button.addEventListener['click', [] => {
const element = document.querySelector['.demo'];
element.style.backgroundColor = 'red';
}];