Heim > Artikel > Web-Frontend > So entfernen Sie den Stilteil von JQuery

So entfernen Sie den Stilteil von JQuery

青灯夜游Original: 2022-09-09 19:05:345581Durchsuche

Zwei Methoden zum Entfernen von Stilen: 1. Verwenden Sie die Funktion „removeAttr()“, um den durch das Stilattribut festgelegten Stil zu entfernen. Die Syntax lautet „$(selector).removeAttr(“style“);“. 2. Verwenden Sie die Funktion empty(), um den Inhalt des Style-Tags zu löschen und den Style-Tag style zu entfernen. Die Syntax lautet „$(“style“).empty();“.

Die Betriebsumgebung dieses Tutorials: Windows7-System, JQuery3.6.1-Version, Dell G3-Computer.

In HTML werden Stilstile in zwei Situationen unterteilt:

1. Der im Stilattribut enthaltene Stil

Das Stilattribut ist das Kernattribut von HTML und wird zur Angabe des Inline-Stils (Inline-Stil) für Elemente verwendet .

Das style-Attribut überschreibt andere globale Stile, wie etwa diejenigen, die im
2. Der im Style-Tag enthaltene Stil

Der Style-Tag definiert die Stilinformationen des HTML-Dokuments.

Im Style-Element können Sie festlegen, wie das HTML-Dokument im Browser gerendert wird.

JQuery verfügt über verschiedene Entfernungsmethoden für verschiedene Situationen.

1. Verwenden Sie die jquery-Methode „removeAttr()“, um Stilattribute zu entfernen. Die Methode „removeAttr()“ wird verwendet, um Attribute aus ausgewählten Elementen zu entfernen.

Syntax:

$(selector).removeAttr(attribute)

Attribut: erforderlich. Gibt die Attribute an, die aus dem angegebenen Element entfernt werden sollen.

Beispiel: Entfernen Sie das Stilattribut des ersten p-Elements.

<!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>
		<h1>这是一个大标题</h1>
		<p style="font-size: 120%;color: blue;background-color: yellow;">这是一个段落。</p>
		<p style="font-size: 120%;color: blue;background-color: yellow;">这是另一个段落。</p>
		<button>移除第一个 p 元素的style属性</button>
	</body>

</html>

ausgewählte Elementknoten und Inhalte, die ausgewählten Elemente werden jedoch nicht gelöscht.

<!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>
			h1{
				color: coral;
			}
			p{
				font-size: 120%;
				color: blue;
				background-color: yellow;
			}
		</style>
	</head>

	<body>
		<h1>这是一个大标题</h1>
		<p>这是一个段落。</p>
		<p>这是另一个段落。</p>
		<button>清空style标签样式</button>
	</body>

</html>

So entfernen Sie den Stilteil von JQuery 【Empfohlenes Lernen:

jQuery-Video-Tutorial

, Web-Front-End-Entwicklungsvideo】

Das obige ist der detaillierte Inhalt vonSo entfernen Sie den Stilteil von JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Kann JQuery den Inhalt eines Links abrufen?Nächster Artikel：Kann JQuery den Inhalt eines Links abrufen?

In Verbindung stehende Artikel

Mehr sehen