如何使用 jQuery 从特定页面中删除全局 CSS 文件？

本文介绍了从页面中删除全局 CSS 文件的方法。它可用于模板可能包含全局 CSS 文件并且您需要删除该文件以使任何其他 CSS 文件生效的场景。我们将在下面的示例中看到这一点：

考虑带有两个 CSS 文件导入的 index.html 文件， global.css与 “ one ”的id和id为“ two ”的第二个page.css 。 global.css是保留在所有页面中的文件，而page.css是特定页面的文件。

下面的代码用于index.html文件。 global.css 和 page.css 文件都包含在演示中。

HTML

  

    
    
  
    

  

    
GeeksForGeeks
    
Welcome to GeeksForGeeks
  
    

        

            A Computer Science portal for geeks. 
            It contains well written, well 
            thought and well explained computer 
            science and programming articles, 
            quizzes and questions. A Computer 
            Science portal for geeks. It contains 
            well written, well thought and well 
            explained computer science and 
            programming articles, quizzes and 
            questions.
        
    
  
    

        

            A Computer Science portal for geeks. 
            It contains well written, well 
            thought and well explained computer 
            science and programming articles, 
            quizzes and questions. A Computer 
            Science portal for geeks. It contains 
            well written, well thought and well 
            explained computer science and 
            programming articles, quizzes and 
            questions.
        
    

  

CSS 文件： global.css 文件

p {
    color: red;
    text-align: center;
}

h3 {
    color: chocolate;
    text-align: center;
}

body {
    background-color: rgb(178, 248, 248);
}

下面的代码是page.css文件。

h1 {
    color: green;
    text-align: center;
}

h2 {
    text-align: center;
}

p {
    color: magenta;
}

输出：这是带有 global.css 和 page.css 文件的 Index.html。

方法：我们将创建一个脚本，该脚本将找到 id 为“one”的全局样式表，并将其从 head 部分中删除。 jQuery 的find()和remove()方法用于此目的。下面给出的示例演示了这一点：

jQuery

  $(document).ready(function() {
      
    // Find the stylesheet with id of 'one'
    // and remove it from the document
    $('head').find('link#one').remove();
  });

最终代码：

HTML

  

    
    
  
    
  
    
    
    
  
    
        $(document).ready(function() {
            $('head').find('link#one').remove();
        });
    

  

    GeeksForGeeks
    Welcome to GeeksForGeeks
  
    
        
            A Computer Science portal for geeks. 
            It contains well written, well 
            thought and well explained computer 
            science and programming articles, 
            quizzes and questions. A Computer 
            Science portal for geeks. It contains 
            well written, well thought and well 
            explained computer science and 
            programming articles, quizzes and 
            questions.
        
    
  
    
        
            A Computer Science portal for geeks. 
            It contains well written, well 
            thought and well explained computer 
            science and programming articles, 
            quizzes and questions. A Computer 
            Science portal for geeks. It contains 
            well written, well thought and well 
            explained computer science and 
            programming articles, quizzes and 
            questions.
        
    

  

输出：这是 global.css 删除后的索引页面。