Wie erhalte ich mit jQuery die Hintergrundbildabmessungen eines Div?

Bestimmen Sie die Abmessungen des Hintergrundbilds mit jQuery

Einführung

Das Abrufen der Abmessungen des Hintergrundbilds eines Divs mit jQuery mag einfach erscheinen stellt aber Herausforderungen dar. Dieser Artikel geht dieser Aufgabe nach und stellt eine erweiterte Lösung vor, die den Prozess vereinfacht.

Fragen:

Abfrage: Wie kann ich das Hintergrundbild erhalten? Größe (Breite und Höhe) eines Div mit jQuery?

Antwort A:

Um die Abmessungen des Hintergrundbilds abzurufen, verwenden Sie den folgenden Ansatz:

var image_url = $('#myDiv').css('background-image'),
    image;

// Remove url() or url("")
image_url = image_url.match(/^url\("?(.+?)"?\)$/);

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

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

    image.src = image_url;
}

Antwort B (Update 2018):

Für eine umfassende Lösung:

var getBackgroundImageSize = function(el) {
    var imageUrl = $(el).css('background-image').match(/^url\(["']?(.+?)["']?\)$/);
    var dfd = new $.Deferred();

    if (imageUrl) {
        var image = new Image();
        image.onload = dfd.resolve;
        image.onerror = dfd.reject;
        image.src = imageUrl[1];
    } else {
        dfd.reject();
    }

    return dfd.then(function() {
        return { width: this.width, height: this.height };
    });
};

Verwendung:

getBackgroundImageSize(jQuery('#mydiv'))
    .then(function(size) {
        console.log('Image size is', size.width, size.height);
    })
    .fail(function() {
        console.log('Could not get size because could not load image');
    });

Das obige ist der detaillierte Inhalt vonWie erhalte ich mit jQuery die Hintergrundbildabmessungen eines Div?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!