CSS tải góc động
|
Nói chung, các tệp CSS và JS được bao gồm tĩnh với mã HTML. Điều đó có nghĩa là chúng được viết bằng tập lệnh hoặc thẻ liên kết trong mã HTML. Nhưng điều này làm chậm quá trình thực thi vì một lượng lớn mã được tải không cần thiết. Nó có thể hoặc không thể sử dụng chức năng liên quan đến phần tử DOM đó. Vì vậy, một cách linh hoạt, chúng tôi tải các tệp CSS và JS trong thời gian chạy khi chúng tôi cần chức năng của chúng Tải động các tệp CSS và JS. Chúng tôi tạo một phần tử tập lệnh cho tệp JS và phần tử liên kết cho tệp CSS theo yêu cầu bằng cách sử dụng DOM, gán các thuộc tính thích hợp cho chúng, sau đó thêm phần tử vào vị trí mong muốn trong cây tài liệu bằng cách sử dụng phần tử. phương thức chắp thêm () Hãy để chúng tôi xem chi tiết toàn bộ quá trình thông qua một dự án nhỏ, từng bước một Bước 1. Tạo một chỉ mục. tệp html và ứng dụng. tập tin js. Đây sẽ là tệp HTML của chúng tôi thông qua đó chúng tôi sẽ trình diễn tải động các tệp JS và CSS. ứng dụng. js sẽ chứa chức năng gọi tải động các tệp. Chúng tôi sẽ thêm nó một cách tĩnh trong tệp HTML của chúng tôi. Trong tệp HTML của chúng tôi, chúng tôi đã tạo hai div bên trong div HTML. Div HTML phía trên chứa tiêu đề và nút để hiển thị thông báo. Chức năng hiển thị tin nhắn sẽ được thêm động. Ban đầu, nút sẽ không hoạt động. Ở div phía dưới, chúng ta có hai nút, một nút để tải tệp CSS và nút còn lại để tải tệp JS một cách linh hoạt. Các chức năng onClick cho các nút này được xác định trong ứng dụng. tập tin js. cấu trúc tệp  mục lục. html
trong ứng dụng. js, chúng ta có hai hàm loadJS() và loadCSS() là thuộc tính onClick của hai nút được xác định trong div HTML bên dưới trong tệp HTML. Để tải tệp động,
Việc triển khai thực tế của các bước trên được hiển thị bên dưới trong mã. Chúng tôi cũng sử dụng phương thức chuỗi indexOf() để kiểm tra xem chúng tôi có liên tục không thêm cùng một tệp khi nhấp nhiều lần vào nút không
ứng dụng. js
_______46____224
Bước 2. Bây giờ hãy tạo một phong cách. css, tệp này sẽ được tải động. Tệp này chứa mã để cung cấp đường viền, lề, phần đệm và màu nền cho hai div HTML một cách riêng biệt bằng cách sử dụng id của chúng phong cách. css
Bước 3. Bây giờ chúng ta sẽ tạo một kịch bản. js sẽ hiển thị thông báo bằng cách chỉnh sửa phần tử h3 khi nhấp vào nút Xem thông báo và biến mất div phía dưới hoặc thay đổi thuộc tính hiển thị của nó thành không. Tệp JS này sẽ được tải động script. js
Bước 4. Bây giờ sao chép đường dẫn đầy đủ của chỉ mục. html và tải nó trong trình duyệt của bạn. Ban đầu, nút có nhãn Xem tin nhắn sẽ báo lỗi. Khi bạn nhấp vào nút tải CSS thì kiểu dáng sẽ xuất hiện và sau khi nhấp vào nút tải JS, nút Xem thông báo sẽ hoạt động đầu ra Vì vậy, đây là cách bạn có thể xử lý tải động các tệp bằng Thao tác DOM. Nó rất hữu ích khi tăng tốc độ và cung cấp sự mạnh mẽ |
