如何使用 JavaScript 加载 CSS 文件？

CSS 文件用于描述 HTML 元素的显示方式。有多种方法可以在 HTML 文档中添加 CSS 文件。 JavaScript 也可用于在 HTML 文档中加载 CSS 文件。

方法：

• 使用 document.getElementsByTagName() 方法获取 HTML 头部元素。
• 使用 createElement(‘link’) 方法创建新的链接元素。
• 初始化链接元素的属性。
• 将链接元素附加到头部。

示例 1：本示例使用 JavaScript 在 HTML 文档中添加 CSS 文件。

• 使用名称 style.css 创建 CSS 文件：

  .GFG {
      color:green;
  }
  

• 使用 JavaScript 添加 CSS 文件：

    
  
      
          Load CSS file using JavaScript
      
    
      
            
          // Get HTML head element
          var head = document.getElementsByTagName('HEAD')[0]; 
    
          // Create new link Element
          var link = document.createElement('link');
    
          // set the attributes for link element 
          link.rel = 'stylesheet'; 
        
          link.type = 'text/css';
        
          link.href = 'style.css'; 
    
          // Append link element to HTML head
          head.appendChild(link); 
       
  
    
  
      GeeksForGeeks
  
    
                      

输出：

示例 2：本示例使用 JavaScript 在 HTML 文档中添加 CSS 文件。

• 使用名称 style.css 创建 CSS 文件：

  .GFG {
      font-size:24px;
      font-weight:bold;
      color:white;
      background-color:green;
      padding:10px;
      text-align:center;
  }
  

• 使用 JavaScript 添加 CSS 文件：

    
  
      
          Load CSS file using JavaScript
      
    
      
        
          // Create new link Element
          var link = document.createElement('link'); 
    
          // set the attributes for link element
             link.rel = 'stylesheet'; 
        
          link.type = 'text/css';
        
          link.href = 'style.css'; 
    
          // Get HTML head element to append 
          // link element to it 
          document.getElementsByTagName('HEAD')[0].appendChild(link); 
    
       
  
    
  
      GeeksforGeeks
  
    
                      

输出：