How to use offsetLeft and offsetTop in JavaScript?

In JavaScript, offsetLeft and offsetTop are properties used to retrieve the left and top distances of an element relative to its closest positioned parent element.

The method of use is as follows:

// 获取元素
var element = document.getElementById("myElement");

// 获取元素相对于定位父元素的左边距
var leftOffset = element.offsetLeft;

// 获取元素相对于定位父元素的上边距
var topOffset = element.offsetTop;

// 输出结果
console.log("Left offset: " + leftOffset);
console.log("Top offset: " + topOffset);

In the code above, we first used the document.getElementById method to retrieve the element with the id “myElement”. We then used element.offsetLeft and element.offsetTop to get the left and top offsets of this element with respect to its closest positioned parent element, and logged the results to the console.