3

因此，我想获取一个 div 的背景图像的实际大小，并在该站点中搜索我在这个 url 中发现了一些很棒的 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 高。

4

1 回答 1

0

您正在尝试从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, "");

不过，我仍然建议查看这些资源，因为它们提供了一种很好的方法来实现使此类操作易于重复的功能。

于 2012-12-04T23:17:13.997 回答