jquery如何移除style部分樣式

發(fā)布時(shí)間：2022-09-14 10:05:00 來源：億速云閱讀：429 作者：iii 欄目：web開發(fā)

本文小編為大家詳細(xì)介紹“jquery如何移除style部分樣式”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“jquery如何移除style部分樣式”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

移除style樣式的兩種方法：1、利用removeAttr()函數(shù)，可以移除style屬性設(shè)置的樣式，語法“$(selector).removeAttr("style");”。2、利用empty()函數(shù)，用于清空style標(biāo)簽的內(nèi)容，可移除style標(biāo)簽樣式，語法“$("style").empty();”。

本教程操作環(huán)境：windows7系統(tǒng)、jquery3.6.1版本、Dell G3電腦。

在HTML中，style樣式分兩種情況：

1、style屬性包含的樣式
style屬性是HTML核心屬性，用于為元素指定內(nèi)聯(lián)樣式（inline style）。
style屬性將覆蓋其他全局樣式，比如在<style>元素或外部樣式表中定義的樣式。
2、style標(biāo)簽包含的樣式
style標(biāo)簽定義 HTML 文檔的樣式信息。
在 style元素中，您可以規(guī)定在瀏覽器中如何呈現(xiàn) HTML 文檔。

針對不同情況，jquery有不同的移除方法。

1、利用jquery removeAttr()方法移除style屬性

removeAttr() 方法用于從被選元素中移除屬性。

語法：

$(selector).removeAttr(attribute)

attribute：必需。規(guī)定從指定元素中移除的屬性。

示例：移除第一個(gè) p 元素的style屬性

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("p:first").removeAttr("style");
				});
			});
		</script>

	</head>

	<body>
		<h2>這是一個(gè)大標(biāo)題</h2>
		<p style="font-size: 120%;color: blue;background-color: yellow;">這是一個(gè)段落。</p>
		<p style="font-size: 120%;color: blue;background-color: yellow;">這是另一個(gè)段落。</p>
		<button>移除第一個(gè) p 元素的style屬性</button>
	</body>

</html>

jquery如何移除style部分樣式

2、利用jquery empty()方法來清空style標(biāo)簽的內(nèi)容

empty() 方法移除被選元素的所有子節(jié)點(diǎn)和內(nèi)容，但不會刪除被選元素。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.6.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("style").empty();
				});
			});
		</script>
		<style>
			h2{
				color: coral;
			}
			p{
				font-size: 120%;
				color: blue;
				background-color: yellow;
			}
		</style>
	</head>

	<body>
		<h2>這是一個(gè)大標(biāo)題</h2>
		<p>這是一個(gè)段落。</p>
		<p>這是另一個(gè)段落。</p>
		<button>清空style標(biāo)簽樣式</button>
	</body>

</html>

jquery如何移除style部分樣式

讀到這里，這篇“jquery如何移除style部分樣式”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

jquery如何移除style部分樣式

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽