Chúng tôi có thể nhập tệp JS trong CSS không?

Question

Để bao gồm tệp JavaScript bên ngoài, chúng ta có thể sử dụng thẻ script có thuộc tính src. Bạn đã sử dụng thuộc tính src khi sử dụng hình ảnh. Giá trị cho thuộc tính src phải là đường dẫn đến tệp JavaScript của bạn

Nội dung chính Show

Tệp JavaScript
Bản demo đơn giản bao gồm JavaScript
JavaScript của người khác
Khung JavaScript
Kích thước tệp JavaScript
Thêm mã JavaScript vào cuối thẻ </body>
Thêm mã CSS ở giữa các thẻ <head>
Sử dụng Trì hoãn
Sử dụng không đồng bộ
Làm cách nào để kết nối tệp JS với CSS?
Làm cách nào để tham chiếu js trong CSS?

Thẻ tập lệnh này phải được bao gồm giữa các thẻ trong tài liệu HTML của bạn

Tệp JavaScript

Tệp JavaScript không phải là tệp HTML hoặc tệp CSS

Luôn kết thúc bằng phần mở rộng js
Chỉ bao gồm JavaScript

Theo thông lệ, đặt tất cả các tệp JavaScript vào một thư mục có tên là js trên các trang web, như vậy

Bản demo đơn giản bao gồm JavaScript

Dưới đây là minh họa rất đơn giản về cách đưa tệp JavaScript bên ngoài vào trang HTML

JavaScript của người khác

Đối với lớp này, bạn không cần phải viết bất kỳ mã JavaScript thực tế nào. Thật may mắn cho bạn, nhiều người đã viết rất nhiều JavaScript và thậm chí còn cho phép bạn sử dụng nó miễn phí

Khung JavaScript

Framework về cơ bản là một thư viện mã cho một ngôn ngữ nhất định. Nói chung, khung trừu tượng hóa các tác vụ phổ biến và giúp các nhà thiết kế và nhà phát triển viết mã cụ thể của họ dễ dàng và nhanh hơn. Các khung không thực sự tự làm bất cứ điều gì, chúng chỉ cung cấp một nền tảng dễ dàng hơn để mọi người xây dựng trên đó

Khung JavaScript phổ biến

Trong số các khung này, JQuery hiện là khung phổ biến nhất. Đó cũng là từ mà bạn muốn gặp nhất khi được sử dụng như một từ thông dụng

Kích thước tệp JavaScript

Nhiều tệp JavaScript có xu hướng khá lớn, điều này có thể làm chậm thời gian tải trang của bạn. Các khung phổ biến thường cung cấp phiên bản mã "rút gọn" của chúng. Bạn phải luôn sử dụng phiên bản này trong các trang của mình vì phiên bản này sẽ có kích thước tệp nhỏ hơn

Ngay khi Trình phân tích cú pháp HTML gặp mã JavaScript, nó sẽ ngừng phân tích cú pháp HTML và chuyển nó cho công cụ JavaScript để thực thi mã JavaScript

Trong quá trình này, mã JavaScript sẽ báo lỗi nếu không thể tìm thấy phần tử HTML chưa được phân tích cú pháp

Trước tiên hãy xem mã JavaScript

Thêm mã JavaScript vào cuối thẻ </body>

Bằng cách thêm mã Javascript vào cuối thẻ body, nó sẽ đảm bảo rằng các phần tử DOM được tải đầy đủ và có thể truy cập được khi mã Javascript bắt đầu thực thi

Đây là một ví dụ

🛑 Mã Xấu

<body>
  
  <script> 
    var box = document.getElementById("box"); 
    box.innerHTML = "I'm a box"; // Can not set a property of null 
  </script>
  
  <div id="box"></div>

</body>

Trong ví dụ trên, phần tử DOM hộp sẽ không thể truy cập được vào thời điểm trình thông dịch đang cố truy cập thuộc tính InternalHTML của nó

Điều này là do phần tử hộp div được khai báo sau mã Javascript

Như bạn đã biết, nói chung mã đang được thực thi từ trên xuống dưới, từng dòng một

✅ Mã đẹp

<body>

  <div id="box"></div>

  <script> 
    var box = document.getElementById("box"); 
    box.innerHTML = "I'm a box"; // Can not set a property of null 
  </script>

</body>

Trong ví dụ trên, phần tử box DOM được khai báo trước

Vì vậy, nó sẽ có thể truy cập được khi trình thông dịch bắt đầu thực thi mã Javascript ở phía dưới

khá thẳng về phía trước

Chờ đợi…

Đó có phải là lựa chọn duy nhất?

Vâng… câu trả lời là Không

Ngoài ra, bạn có thể chèn mã Javascript vào đầu thẻ body hoặc bất kỳ đâu trong trang HTML miễn là phương thức onload trên đối tượng cửa sổ thực thi trước, trước khi chạy bất kỳ mã JavaScript nào

✅ Mã đẹp

<body> 
  
  <script> 
    window.onload = function() { 
      var box = document.getElementById("box"); 
      box.innerHTML = "I am a box!"; 
    }; 
  </script> 
  
  <div id="box"></div>
    
</body>

Trong ví dụ trên, phương thức onload đợi cho đến khi DOM (tất cả HTML trên trang) được tải đầy đủ trước khi bắt đầu thực thi mã Javascript bên trong

Bạn có thể sử dụng DOMContentLoaded thay vì phương thức onload trên đối tượng cửa sổ

Sự khác biệt chính giữa chúng là

Sự kiện DOMContentLoaded kích hoạt khi tài liệu được tải và cây DOM được xây dựng đầy đủ

Phương thức onload kích hoạt khi tất cả các khung con như hình ảnh, biểu định kiểu, tập lệnh, v.v. đã được tải xuống

Thêm mã CSS ở giữa các thẻ <head>

Không giống như JavaScript, mã CSS phải được đưa vào trước khi mã HTML (DOM) được tải trên trình duyệt

Bạn có thể thắc mắc tại sao… bởi vì bạn có thể thêm mã CSS vào cuối phần nội dung và nó sẽ hoạt động tốt

Giống như mã bên dưới… phải không?

🛑 Mã Xấu

<body>
  <div id="box"></div>

  <style>
    #box {
      border:1px solid red;
      background:yellow;
    }
  </style>
  
</body>

Đoạn mã trên hoạt động tốt vì nó có một lượng nhỏ phần tử DOM trong trang

Khi DOM phát triển, bạn có thể thấy một đoạn lật nhanh là mã HTML trên trình duyệt không có CSS sẽ tải trước, sau đó nhanh chóng CSS sẽ được áp dụng cho trang

Để tránh hành vi này, hãy luôn bao gồm mã CSS, cho dù là nội tuyến hay từ một tệp bên ngoài, ở giữa các thẻ đầu

<head>
  <style>
    #box {
      border:1px solid red;
      background:yellow;
    }
  </style>
</head>
<body>
  <div id="box"></div>
</body>

Sử dụng Trì hoãn

Ngoài ra, nếu bạn muốn sử dụng tệp JavaScript bên ngoài bằng thẻ script, bạn có thể đưa vào trước thẻ kết thúc

Điều này hoạt động gần như mọi lúc, kể cả một số trình duyệt cũ

<body> 
  
  <div id="box"></div>
  <script src="app.js"></script>
    
</body>

Nhưng có một cách tốt hơn đó là sử dụng thuộc tính trì hoãn

Trì hoãn làm cho mã JavaScript được liên kết chờ thực thi một lần

Tệp JavaScript được liên kết đã được tải xuống hoàn toàn và
Trình duyệt kết thúc quá trình xây dựng và kết xuất DOM

<script defer src="app.js"></script>

Sử dụng không đồng bộ

Khi sử dụng thuộc tính async cho phần tử tập lệnh, tệp JavaScript được liên kết bên ngoài sẽ chỉ được thực thi khi được tải xuống đầy đủ

Làm cách nào để kết nối tệp JS với CSS?

JavaScript cũng có thể được sử dụng để tải tệp CSS trong tài liệu HTML. .

sử dụng tài liệu. phương thức getElementsByTagName() để lấy phần tử đầu HTML

Tạo phần tử liên kết mới bằng phương thức createElement('link')

Khởi tạo các thuộc tính của phần tử liên kết

Nối phần tử liên kết vào phần đầu

Làm cách nào để tham chiếu js trong CSS?

Để tham chiếu tệp JavaScript được lưu trữ bên ngoài . $(tài liệu). sẵn sàng(hàm () { $. getScript('ScriptURL/scriptname.

programming css

Chúng tôi có thể nhập tệp JS trong CSS không?

Tệp JavaScript

Bản demo đơn giản bao gồm JavaScript

JavaScript của người khác

Khung JavaScript

Kích thước tệp JavaScript

Thêm mã JavaScript vào cuối thẻ </body>

Thêm mã CSS ở giữa các thẻ <head>

Sử dụng Trì hoãn

Sử dụng không đồng bộ

Làm cách nào để kết nối tệp JS với CSS?

Làm cách nào để tham chiếu js trong CSS?

Bài Viết Liên Quan

MỚI CẬP NHẬP

Xem Nhiều

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội