jQuery で Div の背景畫像のサイズを決定する

問題:
div の幅と高さを取得するjQueryを使用した背景畫像はわかりにくいようです。 $('#myDiv').css('background-image').height(); のような従來の試み「関數(shù)ではありません」エラーが発生します。

解決策:

幸いなことに、獨(dú)創(chuàng)的な解決策が存在します。新しい Image オブジェクトを作成する機(jī)能を利用すると、CSS 內(nèi)で明示的に定義されていない場合でも、畫像の寸法を確認(rèn)できます。スクリプトの更新版は次のとおりです:

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

// Extract the URL without the url() or url("") wrapper
image_url = image_url.match(/^url\("?(.+?)"?\)$/);

// Proceed if the image URL was obtained
if (image_url[1]) {
    image_url = image_url[1];
    // Create a new Image object
    image = new Image();

    // Trigger an event when the image is loaded
    // This ensures we get the actual image dimensions
    $(image).load(function () {
        alert('Width: ' + image.width + '\nHeight: ' + image.height);
    });

    image.src = image_url;
}

改良されたアプローチ (2018):

強(qiáng)化された機(jī)能とエラー処理を提供する、より包括的なソリューションを以下に示します。

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

    // Handle existence of image URL
    if (imageUrl) {
        // Create a new Image object
        var image = new Image();
        // Resolve the deferred on load, reject on error
        image.onload = dfd.resolve;
        image.onerror = dfd.reject;
        // Assign the image source
        image.src = imageUrl[1];
    } else {
        // Image not available, reject
        dfd.reject();
    }

    // Return the dimensions if the image loads
    return dfd.then(function() {
        // Return the dimensions as an object
        return { width: this.width, height: this.height };
    });
};

// Sample usage
getBackgroundImageSize(jQuery('#mydiv'))
    .then(function(size) {
        // Success - log the dimensions
        console.log('Image size is: ', size);
    })
    .fail(function() {
        // Error - log failure message
        console.log('Failed to determine image size');
    });

以上がjQueryを使用してDivの背景畫像のサイズを決定する方法?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。