2

我正在尝试获取元素背景图像的宽度和高度。当您单击它时，它应该在元素内显示它（在本例中为“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
};

这是小提琴。问题是它只在 Chrome中有效，所有其他主要浏览器都返回“0 0”。我不知道是什么原因。这张图不是满载了吗？

4

2 回答 2

3

问题是某些浏览器在 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;
};
于 2013-06-21T22:05:12.743 回答
0

我想你需要等待onload图像上的事件。

于 2017-05-05T11:06:00.830 回答