javascript - 如何用DOM检索style.top，还有其他方法吗？

Question

我指定了一个 ID 为 testBox 的 div:

<div id="testBox"></div>

并在头部设置样式:

#testBox {
        background: red;
        width: 25px;
        height: 25px;
        left: 0;
        top: 0;
            }

然后在正文的底部，我把 JS :

var box = document.getElementById("testBox");
        console.log(box.style.left);
        console.log(box.style.width);

在 FireFox 中使用 FireBug，但它只告诉我:

it's an empty string....

但是当我像这样将样式信息放在 div 标签中时:

<div id="testBox" style="background: red;width: 25px;height: 25px;"></div>

然后JS可以完成它的工作，检索我想要的所有信息

这是获取所有内联样式信息的唯一方法吗，或者我只是错过了一些东西，毕竟我只是 JS 和 DOM 的新手....

Answer 1

你可以试试getComputedStyle() .它给出了元素的所有 CSS 属性的最终使用值。

var box = document.getElementById("testBox");
var style=window.getComputedStyle(box);
console.log("Height : " + style["height"]);
console.log("Width : " + style["width"]);
console.log("Left : " + style["left"]);