jquery-Methode, um die Bildhöhe zu ermitteln

jQuery ist eine auf JavaScript basierende JavaScript-Bibliothek, die in JavaScript geschriebenen Code prägnanter und benutzerfreundlicher macht. Im Prozess der Webentwicklung ist es häufig notwendig, Informationen wie die Höhe und Breite von Bildern zu erhalten. Im Folgenden stellen wir vor, wie Sie mit jQuery die Höhe eines Bildes ermitteln.

1. Ermitteln Sie die Bildhöhe über das img-Element.

In HTML können Sie das img-Element zum Einbetten von Bildern verwenden. Wir können den jQuery-Selektor verwenden, um das Element und sein Höhenattribut abzurufen. Der Code lautet wie folgt:

var height = $('img').height();

'img' ist hier ein Selektor, der zum Auswählen von Bildelementen im Dokument verwendet wird. Die Methode height() wird verwendet, um die Höhe eines Elements zu ermitteln und einen numerischen Wert zurückzugeben. Da diese Methode die Höhe des Elements ohne die Höhe des Rahmens und der Polsterung ermittelt, ist dieser Höhenwert kleiner als die Höhe des tatsächlichen Bildes. Wenn Sie die Höhe einschließlich Rändern und Innenabstand ermitteln müssen, können Sie die Methode „outerHeight()“ verwenden.

2. Ermitteln Sie die Bildhöhe durch das Ladeereignis

Eine andere Möglichkeit, die Bildhöhe zu ermitteln, besteht darin, die Höhe nach dem Laden des Bildes abzurufen. Wir können die Methode „load()“ verwenden, um ein Ereignis zu binden, wenn das Bild geladen wird, und die Höhe des Bildes in der Ereignisbehandlungsfunktion abzurufen. Der Code lautet wie folgt:

$('img').on('load', function() {
  var height = $(this).height();
});

Die „on“-Methode wird hier verwendet, um das Ladeereignis zu binden. Beachten Sie, dass die bind()-Methode hier nicht verwendet werden kann, da die bind()-Methode nur dann erfolgreich gebunden werden kann, wenn das Bild geladen wurde und das Ladeereignis nach dem Laden des Bildes ausgelöst wird. In der Ereignisverarbeitungsfunktion können wir $(this) verwenden, um das Bildelement abzurufen, das derzeit das Ereignis auslöst, und dann die Methode height() verwenden, um die Bildhöhe abzurufen.

3. Ermitteln Sie die Bildhöhe über das neu erstellte Bildobjekt.

Wir können die Höhe und Breite des Bildes auch ermitteln, indem Sie ein neues Bildobjekt erstellen. Der Code lautet wie folgt:

var img = new Image();
img.onload = function() {
  var height = this.height;
}
img.src = 'image.png';

Hier erstellen wir zunächst ein neues Bildobjekt img und legen seinen Onload-Ereignishandler fest, um seine Höhe zu erhalten, nachdem das Bild geladen wurde. Dann setzen wir das src-Attribut von img, um mit dem Laden des Bildes zu beginnen.

Es ist zu beachten, dass diese Methode das native JavaScript-Image-Objekt verwendet, um die Höhe des Bildes zu ermitteln, anstatt das Bildelement über den jQuery-Selektor abzurufen. Wenn Sie daher andere Methoden von jQuery zum Betreiben dieses Bildobjekts verwenden möchten, müssen Sie es in ein jQuery-Objekt konvertieren, zum Beispiel:

$(img).appendTo('body');

Der obige Code konvertiert das erstellte Bildobjekt img in ein jQuery-Objekt und fügt es dann hinzu es dem Dokument hinzufügen.

Zusammenfassend können wir mit den oben genannten Methoden die Höhe des Bildes über jQuery ermitteln. Natürlich können diese Methoden auch verwendet werden, um die Breite und andere Eigenschaften des Bildes zu ermitteln. Bei der tatsächlichen Verwendung müssen wir die geeignete Methode entsprechend den spezifischen Anforderungen auswählen.

Das obige ist der detaillierte Inhalt vonjquery-Methode, um die Bildhöhe zu ermitteln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!