screen对象

获取屏幕的高宽（分辨率）

window对象

获得窗口位置及大小

element对象

在介绍element对象各种高宽之前有必要解释一下盒模型 默认盒模型 Box-sizing:content-Box;

当不出现滚动条时

clientWidth:

在页面上返回内容的可视宽度（不包括边框，边距或滚动条）

clientHeight:

在页面上返回内容的可视高度（不包括边框，边距或滚动条）

offsetWidth:

返回元素的宽度包括边框和填充，但不包括边距

offsetHeight:

返回元素的高度包括边框和填充，但不包括边距

offsetLeft:

获取对象相对于版面或由 offsetLeft属性指定的父坐标的计算左侧位置

offsetTop:

获取对象相对于版面或由 offsetTop属性指定的父坐标的计算顶端位置

当出现滚动条时

scrollWidth:

返回元素的整个宽度（包括带滚动条的隐蔽的地方）

scrollHeight:

返回整个元素的高度（包括带滚动条的隐蔽的地方）

scrollTop:

向下滑动滚动块时元素隐藏内容的高度。不设置时默认为0，其值随着滚动块滚动而变化

scrollLeft:

向右滑动滚动块时元素隐藏内容的宽度。不设置时默认为0，其值随着滚动块滚动而变化

event对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

event.pageX:

相对整个页面的坐标，以页面的左上角为坐标原点到鼠标所在点的水平距离（IE8不支持）

event.pageY:

相对整个页面的坐标，以页面的左上角为坐标原点到鼠标所在点的垂直距离（IE8不支持）

event.clientX:

相对可视区域的坐标，以浏览器可视区域左上角为坐标原点到鼠标所在点的水平距离

event.clientY:

相对可视区域的坐标，以浏览器可视区域左上角为坐标原点到鼠标所在点的垂直距离

event.screenX:

相对电脑屏幕的坐标，以屏幕左上角为坐标原点到鼠标所在点的水平距离

event.screenY:

相对电脑屏幕的坐标，以屏幕左上角为坐标原点到鼠标所在点的垂直距离

event.offsetX:

相对于自身的坐标，以自身的padding左上角为坐标原点到鼠标所在点的水平距离

event.offsetY:

相对于自身的坐标，以自身的padding左上角为坐标原点到鼠标所在点的水平距离

总结

以上就是获取JS中网页各种高宽与位置的方法总结，对大家学习JS的时候提供了方便，有需要的小伙伴们可以参考学习。

原文链接：https://www.f2er.com/js/47058.html