Heim > Web-Frontend > CSS-Tutorial > Wie erhalte ich mit jQuery die Hintergrundbildabmessungen eines Div?

Wie erhalte ich mit jQuery die Hintergrundbildabmessungen eines Div?

Susan Sarandon
Freigeben: 2024-12-13 20:20:12
Original
781 Leute haben es durchsucht

How to Get a Div's Background Image Dimensions Using jQuery?

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;
}
Nach dem Login kopieren

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 };
    });
};
Nach dem Login kopieren

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');
    });
Nach dem Login kopieren

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!

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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage