difference of top and left between Javascript and Jquery

最新推荐文章于 2021-06-18 12:06:07 发布

原创最新推荐文章于 2021-06-18 12:06:07 发布 · 660 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #web

nodejs/html5 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了使用jQuery和原生JavaScript获取网页元素的位置信息，包括相对于文档的位置(offset)和相对于父元素的位置(position)。同时，还讲解了如何获取元素边框宽度(clientTop)。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 viewport
var 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