Question

所以，我想采用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高度。

Answer 1

您正尝试从style属性获取信息，但由于您未将图像背景声明为内联，因此style为空。你必须得到计算的风格。在这里看到这个主题;最佳答案提供了全面的解释。

Read CSS property of an element using JavaScript

另一个好资源：

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, "");

我仍然建议查看这些资源，因为它们提供了一种实现函数的好方法，使这种操作很容易重复。

使用JavaScript获取div的背景图像的真实大小

1 个答案: