jQuery를 사용하여 Div의 배경 이미지 크기를 결정하는 방법은 무엇입니까?

jQuery에서 Div의 배경 이미지 크기 결정

문제:
div의 너비와 높이 획득 jQuery를 사용한 배경 이미지는 찾기 어려운 것 같습니다. $('#myDiv').css('Background-image').height(); "함수 없음" 오류가 발생합니다.

해결책:

다행히도 기발한 해결책이 있습니다. 새로운 이미지 객체 생성 기능을 활용하면 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!