用javascript

Ele.getboundingclient():获取元素相对于浏览器视口的坐标(无论父元素是否定位)，并返回一个具有六个属性的Object:top/left/right/bottom/width/height。几乎所有浏览器都支持这种方法。jQuery中没有直接方法，需要用$ (ele)计算。偏移量()。top-$(文档)。scrolltop()。

注意：右边是指元素右边界到窗口最左边部分的距离，底部是指元素下界到窗口最上面部分的距离。

PageYOffset属性是scrollY属性的别名，它设置或返回文档在垂直方向滚动的像素值。window . pageyoffset==window . scrolly；前者的浏览器兼容性更好。

因此，获取元素在页面文档中的位置：

var X=ele.getBoundingClientRect()。左滚动顶部；var Y=ele.getBoundingClientRect()。top scrollTop//窗口中文档滚动的大小。为了跨浏览器兼容性，请对文档滚动长度使用以下方法：

varscroll top=document . document element . scroll top | | window . pageyoffset | | document . body . scroll top；

在jQuery中

1.鼠标相对于页面的位置

Event.pageX/event.pageY:鼠标和页面左/上边缘之间的距离。

2.元素的位置偏移

Offset():返回包含相对于文档的顶部和左侧属性的对象的坐标。

Position():返回包含顶部和左侧属性的对象相对于最近的包含元素的位置。如果不是，它是相对于文档的。仅对可见元素有效，请注意ele {visibility: hidden}也是一个可见元素。

3.元素的宽度和高度

Width()/height():获取或设置元素[内容]的宽度/高度；如果元素的显示为：无，则其值为0。

InnerWidth()/innerHeight():获取包含填充的元素宽度/高度，不包含边框；

outwidth()/outheight():获取包含填充和边框的元素宽度/高度；

外宽(真)/外高(真):获取整个元素的宽度/高度，包括外边距、边框、内边距和内容；

注意：

1)ele.css('height '):返回一个单位完整的字符串(例如400px)，操作需要进行parseInt转换。Ele.height():返回一个没有单位的数字(例如，400)。

2)height()始终返回内容宽度，而不考虑CSS box-size属性的值。如果CSS框的大小是边框，这个函数将改变这个容器的外部高度，而不仅仅是原来的内容高度。

4.浏览器相关的宽度和高度

$(窗口)。height():获取浏览器可视窗口的高度；

$(文档)。height():获取整个网页文档的高度；当网页的高度小于浏览器窗口时，$(window)。返回高度()。

$(文档)。scrolltop():文档元素相对于文档元素对应的滚动条顶部的垂直偏移量，可以获取滚动距离或设置滚动距离。

即$(文档)。height ()==$(窗口)。高度()$(窗口)。当网页滚动条被拉到最低端时。

注意：不建议使用$('html ')的方法。高度()，$('body ')。高度()获取高度的原因如下：

$(“body”)。height():身体可能有边框，获得的高度会小于$(文档)。高度()；

$('html ')。height():在不同浏览器上获得的高度不同，浏览器不兼容。

$(窗口)。height()如果浏览器窗口的高度没有返回，可能是网页没有添加！DOCTYPE声明。