Question

我正在尝试获取元素背景图像的宽度和高度。单击它时，它应该在元素内显示（在这种情况下为“200 300”）。

HTML：

<div id='test'></div>

CSS：

#test {
  width: 100px; height: 100px;
  background-image: url(http://placehold.it/200x300);
}

JavaScript的：

$('#test').on('click', function () {
  $(this).text(getDimensions($(this)));
});

var getDimensions = function(item) {
  var img = new Image(); //Create new image
  img.src = item.css('background-image').replace(/url\(|\)$/ig, ''); //Source = clicked element background-image
  return img.width + ' ' + img.height; //Return dimensions
};

这是Fiddle。问题是它仅在Chrome 中有效，所有其他主浏览器都返回“0 0”。我不知道是什么原因。那个图形不是满载吗？

Answer 1

问题在于某些浏览器会在CSS中添加引号，并且它正在尝试加载（在小提琴的情况下）“http://fiddle.jshell.net/_display/%22http://placehold.it/200x300%22”。我已经更新了你的.replace（）以寻找“同样，小提琴在http://jsfiddle.net/4uMEq/

$('#test').on('click', function () {
    $(this).text(getDimensions($(this)));
});

var getDimensions = function (item) {
    var img = new Image();
    img.src = item.css('background-image').replace(/url\(|\)$|"/ig, '');
    return img.width + ' ' + img.height;
};

Answer 2

我猜你需要在图片上等待onload事件。

获得背景图像的尺寸

2 个答案: