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左上角为坐标原点到鼠标所在点的水平距离

以上这篇javascript获取网页各种高宽及位置的方法总结就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。