How Can I Get the Dimensions of a DIV's Background Image Using jQuery?

Using jQuery to Obtain the Dimensions of a DIV's Background Image

Seeking to determine the dimensions of a DIV's background image in jQuery can be a challenge, especially when the built-in methods seem to fall short. Fortunately, there exists a solution that leverages the power of Image objects to overcome this hurdle.

Originally, it was believed that the simple line "jQuery('#myDiv').css('background-image').height();" would suffice in retrieving the height of the background image. However, this approach encountered an error indicating that the result was not a function.

The key to success lies in recognizing that background images are stored as URLs rather than actual images. To access the dimensions, we need to extract the URL first. This can be done using the following code:

var image_url = jQuery('#myDiv').css('background-image').match(/^url\("?(.+?)"?\)$/);

Once the URL is obtained, we create an Image object and load the image. Once loaded, the object will expose the desired dimensions:

if (image_url[1]) {
  image_url = image_url[1];
  var image = new Image();

  $(image).load(function() {
    alert(image.width + 'x' + image.height);
  });

  image.src = image_url;
}

This method ensures that the actual image is loaded and dimensions are accurately obtained. Moreover, it supports various forms of URL designations, including those with quotes or parentheses.

The above is the detailed content of How Can I Get the Dimensions of a DIV's Background Image Using jQuery?. For more information, please follow other related articles on the PHP Chinese website!