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.

Copy code

The code is as follows:

document.getElementById("divFloat").style.top=document.getElementById("Button").offsetLeft+25;

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.

Copy code

The code is as follows:

function getOffsetLeft(o)
{
var left=0;
var offsetParent = o;
while (offsetParent != null && offsetParent != document.body)
{
left += offsetParent.offsetLeft;
offsetParent = offsetParent.offsetParent;
}</p> <p>return left;
}

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.

Copy code

The code is as follows:

$("#Button").offset().left

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

Copy code

The code is as follows:

jQuery.fn.extend({
position: function() {
if ( !this[0] ) {
return null;
}
var elem = this[0],
// Get *real* offsetParent
offsetParent = this.offsetParent(),
// Get correct offsets
offset = this.offset(),
parentOffset = /^body|html$/i.test(offsetParent[0].nodeName) ? { top: 0, left: 0 } : offsetParent.offset();
// Subtract element margins
// note: when an element has margin: auto the offsetLeft and marginLeft
// are the same in Safari causing offset.left to incorrectly be 0
offset.top -= parseFloat( jQuery.curCSS(elem, "marginTop", true) ) || 0;
offset.left -= parseFloat( jQuery.curCSS(elem, "marginLeft", true) ) || 0;
// Add offsetParent borders
parentOffset.top += parseFloat( jQuery.curCSS(offsetParent[0], "borderTopWidth", true) ) || 0;
parentOffset.left += parseFloat( jQuery.curCSS(offsetParent[0], "borderLeftWidth", true) ) || 0;
// Subtract the two offsets
return {
top: offset.top - parentOffset.top,
left: offset.left - parentOffset.left
};
},
offsetParent: function() {
return this.map(function() {
var offsetParent = this.offsetParent || document.body;
while ( offsetParent && (!/^body|html$/i.test(offsetParent.nodeName) && jQuery.css(offsetParent, "position") === "static") ) {
offsetParent = offsetParent.offsetParent;
}
return offsetParent;
});
}
});

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).

<<: Detailed explanation of HTML programming tags and document structure

>>: Docker swarm simple tutorial