Question

在我的网页上，我有一些元素（div，sub divs，按钮等），它们的位置是相对于它们所处的div而生成的。这样做的结果是，当使用 window.getComputedStyle 时， top 和 left 属性不是数字值，而是 width 和 height 位于px。

我需要测量目的的绝对值的问题所以我想知道是否有办法以某种方式得到它们。我希望 window.getComputedStyle 会这样做，但显然它没有。

下面有一个例子，没有任何格式但是同样的问题。

如果有jQuery解决方案，我当然也会欣赏它。

亲切的问候，
杰森

<html>
<head>
    <title>Test</title>
    <script type="text/javascript">
        function test() {
            var style = window.getComputedStyle(document.getElementsByTagName("button")[0]);
            alert (
                "top = " + style.top +       //auto
                "\nleft = " + style.left +   //auto
                "\nwidth = " + style.width + //63px
                "\nheight = " + style.height //24px
            );
        }
    </script>
</head>
<body>
    <div>
        <button id="buttonTest" onClick="test()" >Test it!</button>
    </div>
</body>
</html>

Answer 1

getComputedStyle方法返回CSS属性的resolved value。

如果样式表作者（您）未指定某些CSS属性的值（即：top，right，bottom和left），则返回的已解析值将是默认值。这些CSS属性的默认值均为＆＃34; auto＆＃34;。

如果您不想或不想在样式表中自己指定值，并且只需要相对于视口左上角的坐标，请考虑使用Element.getBoundingClientRect()：

＆＃13;

<html>
<head>
    <title>Test</title>
    <style>
        /* Remove default styling to ensure a top and left value of 0 */
        body {margin:0; padding:0}
        button {display:block}
    </style>
    <script type="text/javascript">
        function test() {
            var button = document.getElementsByTagName("button")[0],
                style = window.getComputedStyle(button),
                coordinates = button.getBoundingClientRect();

            alert (
                "top = " + coordinates.top +
                "\nleft = " + coordinates.left + 
                "\nwidth = " + style.width + //63px
                "\nheight = " + style.height //24px
            );
        }
    </script>
</head>
<body>
    <button id="buttonTest" onClick="test()" >Test it!</button>
</body>
</html>

＆＃13;

Answer 2

如果元素的计算top设置为left（默认值），则position和static无法计算。在这种情况下，top和left无关紧要。

Javascript - window.getComputedStyle返回＆＃34; auto＆＃34;作为元素的顶部和左侧属性

2 个答案: