Javascript - object.offsetTop 和 .offsetLeft 给出 0答案

【问题标题】：Javascript - object.offsetTop and .offsetLeft gives 0Javascript - object.offsetTop 和 .offsetLeft 给出 0
【发布时间】：2018-12-13 15:02:32
【问题描述】：

我正在尝试使用 Javascript 获取元素的位置。我已经使用了clientTop、offsetHeight、window.getComputedStyle(box1).top 以及介于两者之间的一些东西，但是当我控制台日志时我得到的都是 0。该元素几乎放在页面中间，所以它应该是除了 0结果。

HTML：

<body>
    <h1>Box placement</h1>

    <div id='box1' class='box center green size200'>

    </div>
</body>

JS：

let box1 = document.querySelector('#box1');

let browserHeight = window.innerHeight;
let browserWidth = window.innerWidth;
let boxHeight = box1.clientTop;
let boxWidth = box1.offsetLeft;

function printInfo() {                               //Result
    console.log(browserHeight);                      //1185
    console.log(browserWidth);                       //1266
    console.log(boxHeight);                          //0
    console.log(boxWidth);                           //0
    console.log(window.getComputedStyle(box1).top);  //auto
    console.log(box1.offsetLeft);                    //0
}

printInfo();

对我可能出错的地方有什么想法吗？这里也是 CSS 的一个小技巧：http://jsfiddle.net/1f23v9nj/1/

【问题讨论】：

标签： javascript object offset

【解决方案1】：

这种行为是由 less.js 库引起的。如果你真的不需要它的特性，那就不要包含它——问题解决了。

如果您确实需要它——原因在你的问题中的代码中并不明显——然后等待less.pageLoadFinished 承诺解决，如下所示：

less.pageLoadFinished.then(function () {
    'use strict';

    let box1 = document.querySelector('#box1');
    // ... etc
});

见updated fiddle

【讨论】：

我想尝试同时学习 LESS，但我会暂停那个... :) 不过很好的修复。