Heim > Artikel > Web-Frontend > So entfernen Sie eine Reihe von Stilen mit einem Klick auf eine Schaltfläche in JQuery
So entfernen Sie eine Reihe von Stilen mit einem Klick auf eine Schaltfläche in JQuery
- WBOYOriginal
- 2022-01-14 12:11:481508Durchsuche
Methode: 1. Verwenden Sie den „.class“-Selektor, um Stile für die angegebene Elementzeile festzulegen. 2. Binden Sie das Klickereignis an die Schaltfläche und geben Sie die Verarbeitungsfunktion an. 3. Verwenden Sie die Methode „removeClass()“ in der Funktion Entfernen Sie die Klasse der angegebenen Elementzeile. Um eine Stilzeile zu entfernen, lautet die Syntax „element object.removeClass(„angegebene Klasse“)“.
Die Betriebsumgebung dieses Tutorials: Windows10-System, JQuery3.2.1-Version, Dell G3-Computer.
So entfernen Sie eine Reihe von Stilen durch Klicken auf eine Schaltfläche in jquery
Sie können den .class-Selektor verwenden, um Stile für bestimmte Elemente festzulegen.
Auf diese Weise kann der Stil des Elements sofort entfernt werden. Der Stil kann auch mit der CSS-Methode entfernt werden, er kann jedoch nicht direkt entfernt werden, daher wird die Methode „removeClass“ verwendet. Die Methode
removeClass() entfernt eine oder mehrere Klassen aus dem ausgewählten Element.
Das Beispiel sieht wie folgt aus:
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").removeClass("intro");
});
});
</script>
<style type="text/css">
.intro{
font-size:120%;
color:red;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p class="intro">这是一行段落。</p>
<p >这是另一行段落。</p>
<button>移除指定一行的样式</button>
</body>
</html>Ausgabeergebnis:
Nach dem Klicken auf die Schaltfläche:
Empfohlene verwandte Video-Tutorials: jQuery-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo entfernen Sie eine Reihe von Stilen mit einem Klick auf eine Schaltfläche in JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!