So setzen Sie Dimensionen von HTML -Elementen mit JQuery
Das richtige Einstellen der Dimensionen von HTML -Elementen ist bei der Strukturierung des Layouts einer Webseite von großer Bedeutung, da die richtigen Dimensionen das Gesamtaussehen Ihrer Website verbessern, was im Gegenzug die Benutzererfahrung steigert. JQuery bietet viele Methoden, mit denen Sie diese Aufgabe mit großer Leichtigkeit ausführen können.
Dimensionen von HTML-Elementen können mit den unten erwähnten JQuery-Methoden festgelegt werden.
- Breite () Methode
- Höhe () Methode
- InnnerWidth () Methode
- InnnerHeight () Methode
- Oterwidth () -Methode
- äußereheight () Methode
Lassen Sie uns sie ausführlich erkunden.
Breite () Methode
Zum Zweck des Einstellens oder Abholens der Breite von HTML -Elementen wird die Breite () -Methode verwendet.
Diese Methode funktioniert so, dass sie die Breite des ersten übereinstimmenden Elements zurückgibt, wenn sie nur zum Abholen der Breite eines Elements verwendet wird. Wenn sie jedoch zur Festlegung der Breite verwendet wird, wird die Breite aller übereinstimmenden Elemente festgelegt.
Syntax
Um die Breite eines Elements zu holen.
$ (Selektor).Breite()Zum Festlegen der Breite eines Elements.
$ (Selektor).Breite (Wert)Beispiel
Angenommen, Sie möchten die Breite eines Elements mithilfe der jQuery -Breite () ändern () Methode. Verwenden Sie den folgenden Code.
Html
Im obigen HTML -Code haben wir ein und ein Element erstellt. Darüber hinaus haben wir dem Element mit Inline -CSS etwas Stil gegeben.
JQuery
$ (Dokument).Ready (function ()$ ("#button").klicken (function ()
$ ("div").Breite (500);
);
);
In diesem jQuery -Code wird die Width () -Methode verwendet, um eine neue Breite des Elements auf 500px festzulegen.
Ausgang
Bevor Sie auf die Schaltfläche klicken.
Nach dem Klicken auf die Schaltfläche.
Die Breite des Elements wurde geändert.
Hieth () Methode
Diese Methode funktioniert ähnlich wie die Width () -Methode, mit dem offensichtlichen Unterschied, dass sie die Höhe der HTML -Elemente ergeben oder abrufen wird.
Diese Methode funktioniert auch so, dass es bei Verwendung der Höhe des ersten Elements, das dem angegebenen Element übereinstimmt Elemente.
Syntax
Zum Abnehmen der Höhe eines Elements.
$ (Selektor).Höhe()Um die Höhe eines Elements festzulegen
$ (Selektor).Höhe (Wert)Beispiel
Angenommen, Sie möchten mit der Methode jQuery Height () eine gewisse Höhe eines Elements einstellen. Folgen Sie dem folgenden Code.
Html
Gib deinen Namen ein:Hier haben wir ein Eingangsfeld erstellt und eine Höhe von 10px, Breite von 200px und Hintergrundfarbe Pink gesetzt.
Darüber hinaus haben wir Aslo eine Schaltfläche erstellt.
JQuery
$ (Dokument).Ready (function ()$ ("Button").klicken (function ()
$ ("Input").Höhe (20);
);
);
Wir haben hier die JQuery Height () -Methode verwendet, um die Höhe des Eingangsfeldes zu ändern. Die Höhe ändert sich, wenn Sie auf die Schaltfläche klicken.
Ausgang
Bevor Sie auf die Schaltfläche klicken.
Nachdem die Schaltfläche geklickt wurde.
Die Methode der Höhe () funktioniert ordnungsgemäß.
Innerwidth () -Methode
Um die innere Breite des ersten Elements abzurufen, das dem angegebenen Element entspricht, wird die Innerwidth () -Methode verwendet.
Syntax
$ (Selektor).Innerbreite ()Beispiel
Angenommen, Sie möchten die Innerbreite eines Bildes anzeigen. Verwenden Sie den folgenden Code.
Html
Hier haben wir ein Bild mit dem Tag angezeigt. Darüber hinaus haben wir seine Höhe, Breite, Polsterung und Rand festgelegt. Zusammen mit dem Bild haben wir auch eine Schaltfläche erstellt, mit der die innere Breite des Bildes angezeigt wird.
JQuery
$ (Dokument).Ready (function ()$ ("Button").klicken (function ()
alarm ("innere Bildbreite des Bildes:" + $ ("IMG").Innerwidth ());
);
);
Im obigen Code verwenden wir die Innerwidth () -Methode, um die innere Breite des Bildes anzuzeigen.
Ausgang
Bevor die Schaltfläche angeklickt wird.
Nachdem die Schaltfläche geklickt wurde.
Die innere Breite des Bildes wurde angezeigt.
Notiz: Die Innerwidth () -Methode beinhaltet auch Polsterung, während die innere Breite eines Elements angezeigt wird.
Innerheight () Methode
Die Innerheight () -Methode wird zum Abholen der inneren Höhe des ersten Elements verwendet, das dem angegebenen Element entspricht.
Syntax
$ (Selektor).Innerheight ()Beispiel
Wir werden das Beispiel verwenden, das im obigen Abschnitt verwendet wird, um die Arbeit der Jquery InnerHeight () -Methode zu verstehen.
JQuery
$ (Dokument).Ready (function ()$ ("Button").klicken (function ()
alarm ("innere Bildhöhe:" + $ ("IMG").Innerheight ());
);
);
Wir haben die Innerheight () -Methode verwendet, um die innere Höhe des Hundebildes zu extrahieren.
Ausgang
Bevor Sie auf die Schaltfläche klicken.
Nachdem Sie auf die Schaltfläche geklickt haben.
Die Innerheight () -Methode funktioniert ordnungsgemäß.
Notiz: Die Innerheight () -Methode beinhaltet auch Polsterung, während die innere Höhe eines Elements angezeigt wird.
Oterwidth () -Methode
Um die äußere Breite des ersten Elements abzurufen, das dem angegebenen Element entspricht, wird die Oterwidth () -Methode verwendet.
Syntax
$ (Selektor).äußere Breite ()Beispiel
Angenommen, Sie möchten die äußere Breite eines DIV -Elements extrahieren. So machst du es.
Html
Wir haben eine DIV erstellt und ihm eine bestimmte Hintergrundfarbe, Größe, Breite, Polsterung und Rand gegeben. Darüber hinaus haben wir auch eine Schaltfläche erstellt.
JQuery
$ (Dokument).Ready (function ()$ ("Button").klicken (function ()
alarm ("äußere Breite von Div:" + $ ("Div").äußere Width ());
);
);
Hier haben wir die Methode jQuery oterwidth () verwendet, um die äußere Breite des DIV -Elements anzuzeigen.
Ausgang
Bevor die Schaltfläche klickt.
Wenn die Schaltfläche angeklickt wird.
Die Oterwidth () -Methode funktioniert ordnungsgemäß.
Notiz: Die Oterwidth () -Methode berechnet die Polsterung sowie die Grenze, während die äußere Breite eines Elements angezeigt wird.
äußereheight () Methode
Die oterHeight () -Methode wird zum Abrufen der äußeren Höhe des ersten Elements verwendet, das dem angegebenen Element entspricht.
Syntax
$ (Selektor).Außenhöhe ()Beispiel
Wir werden das Beispiel verwenden, das im obigen Abschnitt verwendet wird, um die Arbeit der jQuery oterHeight () -Methode zu verstehen.
JQuery
$ (Dokument).Ready (function ()$ ("Button").klicken (function ()
alarm ("äußere Höhe von Div:" + $ ("Div").äußere ());
);
);
Wir haben die äußereheight () -Methode verwendet, um die äußere Höhe des DIV -Elements zu extrahieren.
Ausgang
Bevor Sie auf die Schaltfläche klicken.
Nachdem Sie auf die Schaltfläche geklickt haben.
Die methodische methode oterHeight () funktioniert ordnungsgemäß.
Notiz: Die oterHeight () -Methode beinhaltet auch Polsterung sowie Grenze, während die äußere Höhe eines Elements angezeigt wird.
Abschluss
Die Dimensionen eines HTML -Elements können mit den verschiedenen JQuery -Methoden festgelegt werden. width (), height (), Innerwidth (), Innerheight (), äußere Width () und äußere () ()). Die Methoden der Breite () und der Höhe () werden die Breite und Höhe der Elemente festgelegt oder abrufen. Während die Innerwidth (), InnerHeight (), Oterwidth () und OuterHeight () die innere Breite, die innere Höhe, die äußere Breite und die äußere Höhe der ersten übereinstimmten Elemente abrufen. Alle diese Methoden werden zusammen mit den relevanten Beispielen ausführlich erläutert.