将DOM样式分配给var

Question

出于某种原因，如果我输入：

var i = document.getElementById('fake').style.backgroundPosition;

我未定义。

然而，

document.getElementById('fake').style.backgroundPosition;

本身，返回正确的答案。

有什么想法吗？

Answer 1

当我在Chrome中实际存在的元素上使用该行代码时，我得到i等于空字符串。你可以在这个jsFiddle中看到：http://jsfiddle.net/jfriend00/b6syd/。

因此，如果您未定义，那么当您运行代码时，您的对象“假”可能不存在。

element.style.backgroundPosition将仅返回实际的内联样式设置或直接为该特定对象设置的编程值。它不会从样式表返回计算样式。如果要获取该属性的当前样式设置，则需要使用以下内容：

var i = window.getComputedStyle(document.getElementById('fake'), null).getPropertyValue('background-position');

而且，它在IE中有所不同。这就是像jQuery或YUI这样的框架非常有用的地方。

在jQuery中，它就是这样：

var i = $("#fake").css('backgroundPosition');