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

通常，CSS 和 JS 文件是静态包含在 HTML 代码中的。这意味着它们是用脚本或 HTML 代码中的链接标记编写的。但这会减慢执行速度，因为不必要地加载了大量代码。它可能使用也可能不使用与该 DOM 元素相关的功能。如此动态地，当我们需要它们的功能时，我们会在运行时加载 CSS 和 JS 文件。

动态加载 CSS 和 JS 文件：我们根据需要使用 DOM 为 JS 文件和 CSS 文件的链接元素创建脚本元素，为其分配适当的属性，然后使用element.append() 方法。

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

第 1 步：创建index.html文件和app.js文件。这将是我们的 HTML 文件，我们将通过它演示动态加载 JS 和 CSS 文件。 app.js文件 将包含调用动态加载文件的功能。我们会将它静态添加到我们的 HTML 文件中。

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

文件结构：

index.html

    
    
    
    Dynamic
    
     
    


      
    
        
            
            
            
               We are here to learn how to load
               CSS and JS file dynamically
            
  
            
             View Message 
        
        
        
        
          
            
            
            
              Load CSS 
            
  
            
            
              Load JS 
                        
        
    

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

对于动态文件加载，

• 我们使用document.createElement( )创建所需的元素
• 然后我们像脚本一样定义/分配属性。 src和脚本。类型。
• 我们将元素附加到头部使用 document.getElementsByTagName('head')[0].append(<元素变量>)

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

应用程序.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 提供边框、边距、填充和背景颜色的代码。

样式.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 步：现在我们将创建一个script.js文件，该文件将通过在单击View Message按钮时编辑 h3 元素并消失下部 div 或将其 display 属性更改为none来显示消息。这个 JS 文件将被动态加载。

脚本.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按钮后，查看消息按钮将变得可用。

输出：

所以这就是你如何使用 DOM Manipulation 处理文件的动态加载。它非常有用，因为它可以提高速度并提供稳健性。