JavaScript thêm CSS vào trang
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 Show
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
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 1 và đính kèm hàm chứa mã trước đóĐây là một ví dụ
Xem Bút trên CodePen
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 2 thành 3 bằng JavaScript, thì phần tử của chúng ta sẽ có màu 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úcHã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 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ị 5 cho thuộc tính 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 5Xem Bút trên CodePen
2. Thay đổi lớp CSS trong JavaScript 6 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 7 hoặc thậm chí chuyển đổi chúng khi sử dụng 8Đây là một ví dụ 1 0Xem Bút trên CodePen 3. Tự động thay đổi biểu định kiểu CSSGiả 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
Đâ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 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 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 1, bạn có thể so sánh từng bộ chọn của quy tắc với 1Đây là mã 1Và đây là ví dụ 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 CSSTrong 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à
Cách thức hoạt động của nó khá đơn giản
Đây là mã 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 |