数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究如何使用jQuery从特定页面移除全局CSS文件？
程序员在开发网页时需要使用CSS来为网页设置样式并使其更具吸引力。我们可以通过三种方式将CSS添加到网页：内联CSS、内部CSS和外部CSS。要应用外部CSS，我们可以使用<link>标签在<head>标签中导入CSS文件。外部CSS文件也可以是全局CSS文件。
有时，我们需要从特定网页中移除全局CSS文件。例如，您允许您的Web应用程序用户在多个主题之间切换，当用户切换主题时，您需要移除旧的CSS文件并根据主题添加新的CSS文件。
在这里，我们将学习使用JQuery从特定页面移除全局CSS文件的不同方法。
使用JQuery的remove()方法
在第一种方法中，我们使用find()和remove()方法从特定网页中移除全局CSS文件。我们可以使用<link>标签将全局CSS文件添加到网页并赋予其唯一的ID。
在JQuery中，我们可以使用ID查找元素并执行remove()方法以从<head>部分移除<link>标签。
语法
用户可以按照以下语法使用find()和remove()方法从特定网页中移除全局CSS文件。
$('head').find('link#unique_id').remove();
在上述语法中，“unique_id”等于包含全局CSS文件URL的“<link>”标签的ID。
示例
在这个例子中，我们在test.html文件中添加了HTML内容。此外，我们将与HTML内容相关的CSS添加到“style1.css”文件中。
在JQuery中，我们访问网页的“head”部分，并尝试查找包含“global”ID的“link”标签。之后，我们执行remove()方法来移除CSS文件。
在输出中，用户可以单击按钮并观察到网页中的所有CSS都将消失，因为我们移除了全局CSS文件。
文件名 – test.html
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"> </script>
<link rel = "stylesheet" href = "C:\Data E\style1.css" id = "global">
</head>
<body>
<h2> Removing the <i> Global CSS files </i> using the jQuery </h2>
<p> This is the paragraph. </p>
<div class = "first">
This is a text inside the div element.
</div>
<br>
<button id = "btn"> Remove the Global CSS files </button>
<script>
$(document).ready(function () {
$("#btn").click(function () {
$('head').find('link#global').remove();
});
});
</script>
</html>
文件名 – style1.css
.first {
background-color: red;
font-size: 20px;
font-weight: bold;
width: 200px;
height: 200px;
}
p {
color: blue;
font-size: 20px;
}
使用attr()方法添加“disabled”属性到链接
从特定网页移除全局CSS文件的另一种方法是使用attr()方法。attr()方法允许我们为HTML元素设置任何属性。我们可以将“disabled”属性设置为包含全局CSS文件的“<link>”标签。
语法
用户可以按照以下语法将“disabled”属性添加到link标签，以从特定网页移除全局CSS文件。
$('link[href*="filename"]').attr("disabled", "true");
在上述语法中，“filename”应替换为实际的文件名，以选择包含全局CSS文件名的“link”标签。
示例
在下面的示例中，我们将HTML内容添加到网页，并将CSS添加到外部CSS文件。在JQuery中，我们在按钮上添加了“click”事件。因此，每当用户单击按钮时，他们将访问包含“style1.css”字符串的<link>标签，并向其添加“disabled”属性。
用户可以单击输出中的按钮，并观察到CSS将被移除，因为全局CSS文件被移除了。
文件名 – test.html
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"> </script>
<link rel = "stylesheet" href = "C:\Data E\style1.css" id = "global">
</head>
<body>
<h2> Removing the <i> Global CSS files </i> using the JQuery's attr() method and disabled attribute of HTML.
</h2>
<p> Click on the button to remove the Global CSS files. </p>
<br>
<button id = "btn"> Remove the Global CSS files </button>
<script>
$(document).ready(function () {
$("#btn").click(function () {
$('link[href*="style1.css"]').attr("disabled", "true");
});
});
</script>
</html>
文件名 – style1.css
p {
color: green;
font-size: 1.3rem;
font-weight: bold;
border: 3px solid green;
}
用户学习了使用两种不同的方法从特定网页移除全局CSS文件。在第一种方法中，我们使用remove()方法移除link标签；在第二种方法中，我们使用attr()方法向link标签添加“disabled”属性。
2K+ 次浏览
