HTML 如何动态加载CSS和JS文件

通常，CSS和JS文件是静态地通过HTML代码包含进来的。这意味着它们被写在HTML代码的script或link标签中。但是这会拖慢执行速度，因为大量的代码被不必要地加载。它可能会或可能不会使用与该DOM元素相关的功能。因此，我们会在运行时动态地加载CSS和JS文件，当我们需要它们的功能时。

动态加载CSS和JS文件： 我们使用DOM按需创建JS文件的script元素和CSS文件的link元素，为它们分配适当的属性，然后使用element.append()方法将元素添加到文档树中的所需位置。

让我们逐步通过一个小项目详细了解整个过程。

步骤1： 创建index.html文件和app.js文件。这将是我们用来演示动态加载JS和CSS文件的HTML文件。app.js文件包含调用文件动态加载功能的功能。我们将在HTML文件中静态地添加它。

在我们的HTML文件中，我们在一个HTML div中创建了两个div。上层的HTML div包含一个标题和一个显示消息的按钮。显示消息的功能将被动态地添加。初始时，该按钮将无法工作。在下面的div中，我们有两个按钮一个用于动态加载CSS文件，另一个用于动态加载JS文件。这些按钮的onClick函数在app.js文件中定义。

文件结构：

HTML 如何动态加载CSS和JS文件

index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <title>Dynamic</title> 
    
     <!-- the static loading of app.js file-->
    <script src="app.js"></script> 
</head> 
<body> 
      
    <div> 
        <div id="upper"> 
            
            <!-- The message will change on successful 
                 execution of View button-->
            <h3 id="mssg"> 
               We are here to learn how to load 
               CSS and JS file dynamically 
            </h3> 
  
            <!-- The message() function is in script.js file -->
            <button onclick="message()"> View Message </button> 
        </div> 
        <br> 
        
        <!-- This div would disappear after view  
             message is successfully executed-->
        <div id="lower">   
            
            <!-- The loadCSS would load the styles.css file -->
            <button onclick="loadCSS()"> 
              Load CSS  
            </button> 
  
            <!-- The loadJS would load the script.js file-->
            <button onclick="loadJS()"> 
              Load JS  
            </button>             
        </div> 
    </div> 
</body> 
</html>

在app.js 文件中，我们有两个函数loadJS() 和loadCSS() 他们是在HTML文件中定义的两个按钮的 onClick 属性。

对于动态文件加载，我们采取以下几个步骤：

我们使用document.createElement( <element name>) 创建所需的元素。
然后我们定义/赋值属性，例如script.src 和script.ype。
我们使用 document.getElementsByTagName(‘head’)[0].append( ) 将元素添加到头部。

以下是上述步骤的实际实现代码。我们还使用字符串的indexOf() 方法来检查，避免在多次点击按钮时重复添加相同的文件。

app.js

// The string stores the name of files added till now 
var filesAdded = '';  
  
// For loading JS file 
function loadJS(){  
  
    // Gives -1 when the given input is not in the string 
    // i.e this file has not been added 
      
    if(filesAdded.indexOf('script.js') !== -1) 
        return
          
    // Head tag 
    var head = document.getElementsByTagName('head')[0]  
      
    // Creating script element 
    var script = document.createElement('script')  
    script.src = 'script.js'
    script.type = 'text/javascript'
      
    // Adding script element 
    head.append(script)  
      
     // Adding the name of the file to keep record 
    filesAdded += ' script.js'
} 
  
// To load CSS file 
function loadCSS() {  
  
    if(filesAdded.indexOf('styles.css') !== -1) 
        return
  
    var head = document.getElementsByTagName('head')[0] 
      
    // Creating link element 
    var style = document.createElement('link')  
    style.href = 'styles.css'
    style.type = 'text/css'
    style.rel = 'stylesheet'
    head.append(style); 
      
    // Adding the name of the file to keep record 
    filesAdded += ' styles.css' 
}

步骤2： 现在创建一个 styles.css 文件，该文件将被动态加载。该文件包含提供边框、外边距、内边距和背景颜色给两个分别使用它们的ID的 HTML div 元素的代码。

styles.css

#upper{ 
    border: 2px solid red; 
    margin: 10px; 
    padding: 15px; 
    background-color: aqua; 
    align-items: center; 
} 
  
#lower{ 
    border: 2px solid green; 
    margin: 10px; 
    padding: 15px; 
    background-color: greenyellow; 
    align-items: center; 
}

步骤3： 现在我们将创建一个文件，该文件将通过点击查看消息 按钮，编辑 h3 元素，并使下方的 div消失，或将其display属性更改为none，以显示一条消息。此JS文件将被动态加载。

script.js

function message() { 
  
    // Get the h3 element 
    var h3 = document.getElementById('mssg')  
  
    // Changed it's text, colour 
    h3.innerText = 'CONGRATS!! You have learnt'  
    h3.style.color = 'red'  
      
    // Get the lower div 
    var div = document.getElementById('lower') 
  
    // Disappear mode 
    div.style.display = 'none'  
}

步骤4： 现在复制 index.html 文件的完整路径并在浏览器中加载它。起初，标有查看消息 的按钮会出现错误。当你点击加载CSS 按钮后，样式会显示出来，然后点击加载JS 按钮后，标有查看消息 的按钮将变为可操作。

输出结果：

HTML 如何动态加载CSS和JS文件