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

本文介绍了从一个页面中删除全局CSS文件的方法。它可以用于这样的场景：模板可能包含一个全局性的CSS文件，你需要删除该文件，这样其他的CSS文件才会生效。我们将在下面的例子中看到这一点。

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

下面的代码是针对index.html文件的。全局.css和页面.css文件都包括在内，以便演示。

<!DOCTYPE html>
<html>
  
<head>
    <!--  CSS  -->
    <link id="one" type="text/css" 
        rel="stylesheet" href="global.css" />
  
    <link id="two" type="text/css" 
        rel="stylesheet" href="page.css" />
</head>
  
<body>
    <h1>GeeksForGeeks</h1>
    <h2>Welcome to GeeksForGeeks</h2>
  
    <div id="para-one">
        <p>
            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.
        </p>
    </div>
  
    <div id="para-two">
        <p>
            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.
        </p>
    </div>
</body>
  
</html>

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。

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

方法：我们将创建一个脚本，找到id为 “one “的全局样式表，并将其从head部分移除。jQuery的find()和remove()方法被用于此目的。这在下面的例子中得到了证明。

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

Final 代码:

<!DOCTYPE html>
<html>
  
<head>
    <!--  CSS  -->
    <link id="one" type="text/css" 
        rel="stylesheet" href="global.css" />
  
    <link id="two" type="text/css" 
        rel="stylesheet" href="page.css" />
  
    <!-- Jquery  -->
    <script src=
        "https://code.jquery.com/jquery-3.5.1.min.js">
    </script>
  
    <script>
         $(document).ready(function() {$ ('head').find('link#one').remove();
        });
    </script>
</head>
  
<body>
    <h1>GeeksForGeeks</h1>
    <h2>Welcome to GeeksForGeeks</h2>
  
    <div id="para-one">
        <p>
            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.
        </p>
    </div>
  
    <div id="para-two">
        <p>
            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.
        </p>
    </div>
</body>
  
</html>

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

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