jQueryを使用してDivの背景画像のサイズを決定する方法?

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

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

解決策:

幸いなことに、独創的な解決策が存在します。新しい Image オブジェクトを作成する機能を利用すると、CSS 内で明示的に定義されていない場合でも、画像の寸法を確認できます。スクリプトの更新版は次のとおりです:

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):

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

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の背景画像のサイズを決定する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。