Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mendapatkan Dimensi Imej Latar Belakang Div Menggunakan jQuery?

Bagaimana untuk Mendapatkan Dimensi Imej Latar Belakang Div Menggunakan jQuery?

Susan Sarandon
Susan Sarandonasal
2024-12-13 20:20:12782semak imbas

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

Tentukan Dimensi Imej Latar Belakang dengan jQuery

Pengenalan

Mendapatkan semula dimensi imej latar belakang div menggunakan jQuery mungkin kelihatan mudah tetapi menimbulkan cabaran. Artikel ini menangani tugasan ini dan membentangkan penyelesaian lanjutan yang memudahkan proses.

Soalan:

Pertanyaan: Bagaimana saya boleh mendapatkan imej latar belakang saiz (lebar dan tinggi) div menggunakan jQuery?

Respons A:

Untuk mendapatkan semula dimensi imej latar belakang, gunakan pendekatan berikut:

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;
}

Respons B (Kemas Kini 2018):

Untuk komprehensif penyelesaian:

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 };
    });
};

Penggunaan:

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');
    });

Atas ialah kandungan terperinci Bagaimana untuk Mendapatkan Dimensi Imej Latar Belakang Div Menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn