Difference of top and left between Javascript and Jquery, differencejquery

Difference of top and left between Javascript and Jquery, differencejquery

1, top and left relative to the document

Jquery
. Offset ()

Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.

var top = $('#elementID').offset().top;var left = $('#elementID').offset().left;

Native javascript
GetBoundingClientRect, Top-left relative to the top-left of the viewport.

var viewportOffset = el.getBoundingClientRect();// these are relative to the viewportvar top = viewportOffset.top;var left = viewportOffset.left;

2, top and left relative to the parent

Jquery
. Position ()
Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

var topToParent = $('#elementID').position().top;var leftToParent = $('#elementID').position().left;

Native javascript

. OffsetTop,. offsetLeft

The HTMLElement. offsetTop read-only property returns the distance of the current element relative to the top of the offsetParent node.

var topToParent = element.offsetTop;var leftToParent = element.offsetLeft;

3, Border

Native javascript
Element. clientTop;

The width of the top border of an element in pixels. It does not include the top margin or padding. clientTop is read-only.
See: https://developer.mozilla.org/en-US/docs/Web/API/Element/clientTop