Javascript 获取背景图像的维数

我试图得到元素背景图像的宽度和高度。当您单击它时，它应该在元素内部显示它（在本例中为“200 300”）

HTML:

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”。我不知道原因是什么。这个图形不是已经完全加载了吗？

问题是一些浏览器在CSS中添加了引号，并且它试图加载（在小提琴的例子中是）”。我已经更新了你的.replace（）以查找“以及”，并且在

---

我想您需要等待图像上的

onload

事件。

谢谢，我从来没有猜到这是问题所在。如果有疑问，请打开web inspector并

console.log（）

；）我得到的消息是FF无法加载带有奇怪URL的图像。

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

$('#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
};

$('#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;
};