Heim > Web-Frontend > Front-End-Fragen und Antworten > So ändern Sie die Position von div mit jquery

So ändern Sie die Position von div mit jquery

WBOY
Freigeben: 2022-03-22 17:21:14
Original
3375 Leute haben es durchsucht

In jquery können Sie die css()-Methode mit dem margin-Attribut verwenden, um die Position des div zu ändern. Die css()-Methode wird verwendet, um ein oder mehrere Stilattribute des ausgewählten Elements festzulegen oder zurückzugeben Wird verwendet, um den äußeren Rand des Elements festzulegen. Syntax Es ist „div object.css(margin: changes position value;)“.

So ändern Sie die Position von div mit jquery

Die Betriebsumgebung dieses Tutorials: Windows10-System, JQuery3.2.1-Version, Dell G3-Computer.

So ändern Sie die Position von div in jquery

In jquery wird der Positionsstil von div hauptsächlich über die Methode css() festgelegt, um die Position von div zu ändern.

Erstellen Sie eine neue HTML-Datei und nennen Sie sie test.html Erklären Sie die dynamische Änderung der jQuery-DIV-Position. Erstellen Sie ein Modul mit div-Tags, um seine Position mithilfe der folgenden JQuery-Methode dynamisch zu ändern. Setzen Sie das Klassenattribut von div auf mydiv, das hauptsächlich zum Abrufen des div-Objekts über diese Klasse unten verwendet wird.

Um den offensichtlichen Effekt zu zeigen, stellen Sie mit CSS die Höhe und Breite des Div auf 150 Pixel und den Rand auf einen durchgehenden grauen Rand von 1 Pixel ein. Erstellen Sie eine Schaltfläche mithilfe des Schaltflächen-Tags, binden Sie das Ereignis onclick an die Schaltfläche und führen Sie die Funktion edit() aus, wenn auf die Schaltfläche geklickt wird.

Erstellen Sie im js-Tag die Funktion edit(). Rufen Sie innerhalb der Funktion das div-Objekt über den Klassennamen ab und verwenden Sie die Methode css(), um den linken Rand links und den oberen Rand oben festzulegen und die Position zu ändern der div.

So ändern Sie die Position von div mit jquery

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

So ändern Sie die Position von div mit jquery

So ändern Sie die Position von div mit jquery

Zusammenfassung:

1 Erstellen Sie eine test.html-Datei.

2. Verwenden Sie in der Datei das div-Tag, um ein Modul zu erstellen, und verwenden Sie das button-Tag, um eine Schaltfläche zum Auslösen der Ausführung der js-Funktion zu erstellen.

3. Erstellen Sie eine Funktion im js-Tag, rufen Sie das div-Objekt ab und verwenden Sie die Methode css(), um den linken Rand links und den oberen Rand oben festzulegen, um die Position des Div zu ändern.

Hinweise

Die Methode css() unterstützt die Einstellung aller CSS-Stile, die durch Kommas getrennt sind.

Empfohlene verwandte Video-Tutorials: jQuery-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo ändern Sie die Position von div mit jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
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