乐趣区

获取网页相对边距

jiezi

1.getBoundingClientRect()

getBoundingClientRect 用于获取某个元素相对于视窗的位置集合。集合中有 top, right, bottom, left 等属性。

let client = e.target.getBoundingClientRect();

client.width // 宽度
client.height // 高度
client.top // 上边距(相对可视区域上方)
client.right // 右边距(相对可视区域右方)
client.bottom // 下边距(相对可视区域下方)
client.left // 左边距(相对可视区域左方)
client.x // x 轴坐标 /left (相对可视区域左方)
client.y // y 轴坐标 /top (相对可视区域上方)

2. 获取浏览器网页的相关高度 / 宽度

  • body 对象的宽 / 高
document.body.clientWidth // body 对象宽度
document.body.clientHeight // body 对象高度
  • 可见区域宽 / 高
document.documentElement.clientWidth // 可见区域宽度
document.documentElement.clientHeight // 可见区域高度
  • 网页正文全文宽 / 高
document.body.scrollWidth
document.body.scrollHeight
  • 网页上方滚动的上 / 左侧边距
document.body.scrollTop // 上方滚动距离(手机 / 平板)
document.body.scrollLeft // 左侧滚动距离(手机 / 平板)
document.documentElement.scrollTop // 上方滚动距离
document.documentElement.scrollLeft // 左侧滚动距离
window.pageXOffset // 上方滚动距离 window.scrollX 别名
window.pageYOffset // 左侧滚动距离 window.scrollY 别名
  • 网页宽 / 高(包括边线的宽 / 高)
document.body.offsetWidth
document.body.offsetHeight
document.documentElement.offsetWidth
document.documentElement.offsetHeight
  • 返回当前渲染窗口中和屏幕有关的属性 window.screen (包括边线和滚动条)
window.screen.width // 可用空间宽度
window.screen.height // 可用空间高度
window.screen.availWidth // 可用空间宽度
window.screen.availHeight // 可用空间高度
window.screen.availLeft // 可用空间左边距离屏幕 (系统电脑) 左边界的距离
window.screen.availTop // 可用空间上边距离屏幕 (系统电脑) 上边界的距离
window.screen.colorDepth
window.screen.pixelDepth
window.screen.orientation

注意: availLeft/availTop 大多数情况下，返回 0。

如果你在有两个屏幕的电脑上使用该属性，在右侧屏幕计算该属性值时，返回左侧屏幕的宽度（单位：像素），也即左侧屏幕左边界的 X 坐标。

在 Windows 中，该属性值取决于哪个屏幕被设为主屏幕，返回相对于主屏幕左边界的 X 坐标。就是说，即使主屏幕不是左侧的屏幕，它的左边界的 X 坐标也是返回 0。如果副屏幕在主屏幕的左侧，则它拥有负的 X 坐标。

[1] [2] – 左屏幕 availLeft 返回 0，右侧的屏幕返回左侧屏幕的宽度；

[2] [1] – 左侧屏幕 availLeft 返回该屏幕的 -width，右侧屏幕返回 0；

let setY = window.screen.height - window.screen.availTop;
let setX = window.screen.width - window.screen.availLeft;
window.moveTo(setX, setY);

3. 获取元素对应的边距属性

  • 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的属性
let _dom = document.getElementById('container');

_dom.offsetHeight // 当前元素内容高度
_dom.offsetLeft // 当前元素相对父元素的偏移距离(不包括当前元素内边距)
_dom.offsetTop // 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置   
event.clientX // 相对文档的水平坐标   
event.clientY // 相对文档的垂直坐标   
event.offsetX // 相对容器的水平坐标   
event.offsetY // 相对容器的垂直坐标
  • 注意：offsetTop/offsetLeft 是相对定位父级的偏移量，如果需要可以使用 getBoundingClientRect().top 与 scrollTop 解决现有问题
退出移动版