Javascript - object.offsetTop and .offsetLeft gives 0

Question

I'm trying to get the position of an element by using Javascript. I have used clientTop, offsetHeight, window.getComputedStyle(box1).top and a few things in between but all I get when I console log it is 0. The element is placed almost in the middle of the page so it should be all but 0 in the result.

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();

Any ideas to where I might have gone wrong? Here is a fiddle with the CSS as well: http://jsfiddle.net/1f23v9nj/1/

trincot · Accepted Answer · 2018-12-13 15:33:54Z

2

That behaviour is caused by the less.js library. If you don't really need its features, then don't include it -- problem solved.

If you do need it -- for reasons not apparent from the code in your question -- then wait for the less.pageLoadFinished promise to resolve, as follows:

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

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

See updated fiddle

answered Dec 13, 2018 at 15:33

trincot

357k38 gold badges282 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Thomas Bengtsson Over a year ago

I thought to try to learn LESS the same time but I'll pause that then... :) Brilliant fix though.

Collectives™ on Stack Overflow

Javascript - object.offsetTop and .offsetLeft gives 0

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related