js获取各种距离和宽高
window
window.screen.height 返回屏幕的高度
window.screen.width 返回屏幕的宽度
window.innerHeight/window.innerwidth
返回窗口内部的高度/宽度(不包含工具栏和滚动条)
window.pageXOffset/window.pageYOffset
文档在窗口左上角水平和垂直方向滚动的像素
window.pageYOffset
window.scrollY
浏览器滚动掉的Y距离document
可视区域
document.documentElement.offsetHeight(不包括外边距)
document.documentElement.clientHeight-浏览器窗口的可见区域页面高度
document.documentElement.scrollHeight-浏览器窗口的整个页面高度滚动高度
document.documentElement.scrollTop
浏览器滚动掉的Y距离鼠标event事件
属性 | 说明 |
|---|---|
offsetX | 以当前的元素的左上角为原点, 距离元素顶部的距离 |
offsetY | 以当前的元素的左上角为原点, 距离元素左侧的距离 |
clientX | 以浏览器窗口(视口)的左上角为原点, 距离视口顶部距离, 不随页面滚动而改变 |
clientY | 以浏览器窗口(视口)的左上角为原点, 距离视口左侧距离, 不随页面滚动而改变 |
pageX | 以整个页面的左上角为原点, 距离页面顶部的距离, 随页面滚动而改变 |
pageY | 以整个页面的左上角为原点, 距离页面左侧的距离, 随页面滚动而改变 |
screenX | 以计算机显示屏屏幕左上角为原点, 距离屏幕顶部的距离 |
screenY | 以计算机显示屏屏幕左上角为原点, 距离屏幕左侧的距离 |
元素的宽高及各种距离
宽高
属性 | 说明 |
|---|---|
clientHeight/clientWidth | 包括元素的可视部分的高度/宽度包括width/height和padding不包括border和滚动条如果是content-box,则为width+2*padding如果是border-box,则为width-2*padding |
offsetHeight/offsetWidth | 包括元素的width/height+padding+border 如果是content-box,为width+2*padding+2*border如果是border-box的话就等于width |
scrollHeight/scrollWidth | 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。为内部可滚动的width/height+2*padding |
scrollTop | 内部向上滚动了的距离 |
style.width/style.height | 只包括width/height,不包括其他(返回值带有'px', 为字符串类型) |
距离
属性 | 说明 |
|---|---|
offsetTop/Left | 元素距离最近的带有定位(fixed/relative/absolute)的父元素的顶部/左侧的距离 |
scrollTop/Left | 此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边/左侧的距离，也就是元素滚动条被向下/向右拉动的距离。 |
腾讯云开发者
