JavaScript是否能够通过元素的样式属性读取CSS中设置的元素位置？

Question

在http://jsfiddle.net/Xs9e2/上有两个元素，名为ONE和TWO。通过使用JavaScript分配DOM元素的style属性来定位元素ONE。元素TWO使用CSS定位。

HTML按预期呈现。

有一个按钮可以按下以提醒两个元素中的每个元素的left和top属性。我们只看到在JavaScript中设置的属性，而不是CSS中设置的属性。

究竟是什么原因造成的？ 不应该我们能够通过JavaScript读取CSS属性吗？我可能指错了。我知道＆＃34;偏移＆＃34;属性和我了解JQuery;我很困惑为什么这种老式的DOM操作并没有像我期望的那样工作。我错过了什么？

Answer 1

style属性是一个属性。也就是说，您只能访问HTML元素属性style中给出的值：

  

3.2.3.8 The style attribute

     

style IDL属性必须返回CSSStyleDeclaration，其值表示属性中指定的声明。 （如果该属性不存在，则该对象表示一个空声明。）对CSSStyleDeclaration对象进行变换必须在该元素上创建一个样式属性（如果已经没有），然后将其值更改为表示的值CSSStyleDeclaration对象的序列化形式。每次都必须返回相同的对象。

CSS提供的样式不会设置元素的属性，因此您无法使用.style访问它。

但是，您可以使用getComputedStyle。

Answer 2

您可以使用特定于IE的currentStyle，其中包含IE9 +支持的所有样式或更好的标准格式（如指出）getComputedStyle，而不是style仅反映内联样式。

alert("one at " 
    + JSON.stringify([getComputedStyle(one).left,getComputedStyle(one).top])
    + "two at "
    + JSON.stringify([getComputedStyle(two).left,getComputedStyle(two).top]));