How to get/calculate the offset of a page element using JavaScript

question

By clicking a control, a floating layer is displayed below the control. The usual practice is to obtain the offset value of the control, calculate the values ​​of the top, left and other CSS properties of the floating layer, and assign them.

Then let's take a look at how to get the offset value of the control.

Pure JS implementation

The first thing that comes to mind is a piece of js like this.

If you find that you need to add value units, then modify it to the following:

I tested it again with IETester and FireFox, and it works fine in IE6+. As before, the pure js method I wrote was ruthlessly despised by FireFox, and the obtained value was incorrect.

I checked online and found that it should be written like this: through a loop, calculating layer by layer, finally getting the accurate offset value.

jQuery Implementation

When I looked into the related issues in more detail, I found that jQuery already contains a function to implement this function: offset(), which is very compatible with various browsers.

After downloading the source code, I found that jQuery is implemented like this

The calculation method is similar, but there is one thing to note:

The offset() function does not include margin values ​​in its calculations (but does include border values).