Wie kann ich mit jQuery die Abmessungen des Hintergrundbilds eines DIV ermitteln?

Mit jQuery die Abmessungen des Hintergrundbilds eines DIV ermitteln

Der Versuch, die Abmessungen des Hintergrundbilds eines DIV in jQuery zu ermitteln, kann ein Problem sein Herausforderung, insbesondere wenn die integrierten Methoden scheinbar nicht ausreichen. Glücklicherweise gibt es eine Lösung, die die Leistungsfähigkeit von Bildobjekten nutzt, um diese Hürde zu überwinden.

Ursprünglich glaubte man, dass die einfache Zeile „jQuery('#myDiv').css('background-image') .Höhe();" würde ausreichen, um die Höhe des Hintergrundbilds abzurufen. Bei diesem Ansatz ist jedoch ein Fehler aufgetreten, der darauf hinweist, dass das Ergebnis keine Funktion war.

Der Schlüssel zum Erfolg liegt in der Erkenntnis, dass Hintergrundbilder als URLs und nicht als tatsächliche Bilder gespeichert werden. Um auf die Dimensionen zuzugreifen, müssen wir zuerst die URL extrahieren. Dies kann mit dem folgenden Code erfolgen:

var image_url = jQuery('#myDiv').css('background-image').match(/^url\("?(.+?)"?\)$/);

Sobald die URL erhalten wurde, erstellen wir ein Image-Objekt und laden das Bild. Nach dem Laden zeigt das Objekt die gewünschten Abmessungen an:

if (image_url[1]) {
  image_url = image_url[1];
  var image = new Image();

  $(image).load(function() {
    alert(image.width + 'x' + image.height);
  });

  image.src = image_url;
}

Diese Methode stellt sicher, dass das tatsächliche Bild geladen wird und die Abmessungen genau ermittelt werden. Darüber hinaus unterstützt es verschiedene Formen der URL-Bezeichnung, einschließlich solcher mit Anführungszeichen oder Klammern.

Das obige ist der detaillierte Inhalt vonWie kann ich mit jQuery die Abmessungen des Hintergrundbilds eines DIV ermitteln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!