Javascript - object.offsetTop и .offsetLeft дает 0 - PullRequest
Новая
       11

Javascript - object.offsetTop и .offsetLeft дает 0

0 голосов
/ 13 декабря 2018

Я пытаюсь получить положение элемента с помощью 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/

1 Ответ

0 голосов
/ 13 декабря 2018

Такое поведение вызвано библиотекой less.js.Если вам не нужны его возможности, не включайте их - проблема решена.

Если вам нужно это необходимо - по причинам, не очевидным из кода в вашем вопросе- затем дождитесь разрешения обещания less.pageLoadFinished следующим образом: 

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

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

См. обновленная скрипка

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...