Heim > Web-Frontend > js-Tutorial > Hauptteil

So stellen Sie den ursprünglichen CSS-Stil in jq wieder her

醉折花枝作酒筹
Freigeben: 2023-01-05 16:14:17
Original
2883 Leute haben es durchsucht

In jquery können Sie die Methode „addClass()“ verwenden, um den ursprünglichen Stil wiederherzustellen. Das Syntaxformat ist „$(“Element Name“).addClcss(“Attribute Name“, „Attribute Value“); ()“ Diese Methode fügt dem ausgewählten Element eine oder mehrere Klassen hinzu und entfernt keine vorhandenen Klassenattribute.

So stellen Sie den ursprünglichen CSS-Stil in jq wieder her

Die Betriebsumgebung dieses Tutorials: Windows7-System, JQuery-Version 1.11.1, Dell G3-Computer.

Erstellen Sie eine neue HTML-Datei mit dem Namen test.html, um zu erklären, wie JQuery das Standard-CSS wiederherstellt.

So stellen Sie den ursprünglichen CSS-Stil in jq wieder her

Erstellen Sie in der Datei test.html ein Modul mit dem div-Tag und setzen Sie das Klassenattribut des div auf testdiv.

Definieren Sie im CSS-Tag einen Stil für den Namen der testdiv-Klasse, legen Sie die Breite auf 100 Pixel, die Höhe auf 120 Pixel und die Hintergrundfarbe auf Gelb fest.

So stellen Sie den ursprünglichen CSS-Stil in jq wieder her

In der Datei test.html verwenden Sie das Button-Tag, um zwei Schaltflächen zu erstellen, eine davon ist „CSS entfernen“ und „CSS wiederherstellen“.

So stellen Sie den ursprünglichen CSS-Stil in jq wieder her

Binden Sie in der Datei test.html das Klickereignis onclick() an die beiden Schaltflächen. Wenn auf die Schaltfläche geklickt wird, werden die Funktionen delcss() bzw. addcss() ausgeführt.

So stellen Sie den ursprünglichen CSS-Stil in jq wieder her

Erstellen Sie im js-Tag die Funktion delcss() bzw. addcss(). Rufen Sie in der Funktion delcss() das div-Objekt über class(testdiv) ab und verwenden Sie zum Entfernen die Methode removeAttr() Rufen Sie in der Funktion addcss() das div-Objekt über den Elementnamen ab und verwenden Sie die Methode addClass(), um die ursprüngliche Klasse zum div-Objekt hinzuzufügen und so das Standard-CSS wiederherzustellen.

So stellen Sie den ursprünglichen CSS-Stil in jq wieder her

Öffnen Sie die Datei test.html im Browser und klicken Sie jeweils auf die Schaltflächen, um den Effekt zu sehen.

So stellen Sie den ursprünglichen CSS-Stil in jq wieder her

So stellen Sie den ursprünglichen CSS-Stil in jq wieder her

So stellen Sie den ursprünglichen CSS-Stil in jq wieder her

【Empfohlenes Lernen: Javascript-Tutorial für Fortgeschrittene

Das obige ist der detaillierte Inhalt vonSo stellen Sie den ursprünglichen CSS-Stil in jq wieder her. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage