本文介绍了从页面中删除全局 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.
jQuery
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
最终代码:
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.
输出:这是 global.css 删除后的索引页面。