使用JavaScript获取div的背景图片的实际大小

Question

使用JavaScript获取div的背景图片的实际大小

javascriptimageimage-size

3

所以，我想获取一个div背景图像的实际大小，在网站上搜索后，我在这个链接中找到了一些很棒的JavaScript代码：http://jsbin.com/olozu/2/edit。

然而，它似乎在我的网站上无法工作，尽管我的代码与上述代码完全相同。

以下是我的代码（JS Bin）

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body onclick="picture()">
  <img id="topicinfo" src="http://pierre.chachatelier.fr/programmation/images/mozodojo-original-image.jpg"><
</body>
</html>

JavaScript:

function picture()
{
  var a=document.getElementById("topicinfo").height;
  alert(a);
}

如果您点击左边的图片，它将显示0宽度0高度。

- user1866818

1

imageSrc 似乎为空。你的代码与他们的代码不同，背景图片是内联声明的。请参见：http://jsbin.com/uzejah/7/edit - ahren

你的意思是图片的声明在 div 标签内部，而不是在 css 中吗？我知道这样也可以，但我想用 css 来实现。 - user1866818

还有，您介意恢复第二个链接中的代码到其以前的状态吗？将来看到这个线程的人会看到您稀释过的代码，而不是原始代码，并感到困惑。 - Brandon

哦，对不起，我没意识到我的更改是对所有人可见的。不管怎样，我已经阅读了上面的评论和来源，感谢大家，我找到了解决方案！ - user1866818

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brandon · Answer 1

你正在尝试从 style 属性中获取信息，但由于你没有在行内声明图像背景，style 是空的。你必须获取计算样式。请参见此线程；顶部答案提供了全面的解释。

使用JavaScript读取元素的CSS属性

另一个好的资源：

http://javascript.info/tutorial/styles-and-classes-getcomputedstyle#getcomputedstyle-and-currentstyle

编辑：更具体地说，你需要做的是：

var imageUrl = getComputedStyle(document.getElementById('topicinfo'));
var imageSrc = imageUrl.replace(/"/g,"")
                       .replace(/url\(|\)$/ig, "");

尽管如此，我仍然推荐查看这些资源，因为它们提供了一种不错的方式来实现函数，以便轻松地重复执行此类操作。