在JS中获取网页各种高度、宽度和位置的方法总结

屏幕对象

获取屏幕的高度和宽度(分辨率)

Screen.width //屏幕宽度screen.height //屏幕高度screen . available width//可用宽度屏幕像素高度减去系统组件高度screen . available height//可用高度屏幕像素宽度减去系统组件宽度window对象

获取窗口位置和大小

Window.screenTop //从窗口顶部到屏幕窗口顶部的距离. screenLeft //从窗口左侧到屏幕窗口左侧的距离. innerWidth //窗口提醒中视点的宽度(window . inner width)；//chrome 1366 ff 1366 ie 1366 window . inner height//窗口中视点的高度与浏览器是否显示菜单栏等因素有关。alert(window . innerheight)；//chrome 643 ff 657 ie 673 window . outer width//浏览器窗口本身的宽度(可见区域的宽度，浏览器框架的宽度)警报(window . outer width)；//chrome 1366 ff 1382 ie 1382 //显示chrome最大化时没有边框宽度，未最大化时有8px。//ff和ie的上下左右边框宽度为8px。window .外套高度//浏览器窗口本身的高度(window .外套高度)；//chrome 728 ff 744 ie 744element对象

在介绍元素对象的各种高度和宽度之前，有必要解释一下默认的盒子模型box-sizing:content-box。

框宽=2 *边距2 *边框2 *填充宽度框高=2 *边距2 *边框2 *填充高度当没有滚动条出现时，

正文{ margin:0} # demo { width:100px高度：100 px；padding:10pxborder:20pxmargin:30px背景色：红色；} div id=' demo ' 123456789 123456789/div client width :返回页面内容的可视宽度(不包括边框、边距或滚动条)

ClientHeight:返回页面内容的可视高度(不包括边框、边距或滚动条)

clientWidth=2 *填充宽度-scrollbarWidth console . log(document . getelementbyid(' demo ')。client width)；//120 scroll bar width=0 client height=2 * padding height-scroll bar height console . log(document . getelementbyid(' demo ')。client height)；//120此时，scrollbarwidth=0 offset twisth :返回元素的宽度，包括边框和填充，但不包括边距

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

offsetWidth=2 *边框2 *填充宽度console . log(document . getelementbyid(' demo ')。offsetWidth)//160 offsetheight=2 * border 2 * padding height console . log(document . getelementbyid(' demo ')。offset heart)//160 offsetLeft :获取对象相对于布局或offset left属性指定的父坐标的计算的左侧位置offsetTop:获取对象相对于布局或offsetTop属性指定的父坐标的计算的顶部位置

console . log(document . getelementbyid(' demo ')。offsetLeft)//30 console . log(document . getelementbyid(' demo ')。offsetTop)//30

当滚动条出现时，

正文{ margin:0padding:20px宽度width:1000px高度：500 px；} div id=' demo ' 123456789123456789/div scrollwidth :返回元素的整个宽度(包括带有滚动条的隐藏位置)

ScrollHeight:返回整个元素的高度(包括带有滚动条的隐藏位置)

scroll width=2 * padding width console . log(document . body . scroll width)//1040 scroll height=2 * padding width console . log(document . body . scroll height)//540 scroll top 3360向下滑动滚动块时元素隐藏内容的高度。未设置时，默认为0，其值随着滚动块的滚动而变化

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

事件对象

Event对象表示事件的状态，例如事件发生的元素、键盘按键的状态、鼠标的位置和鼠标按钮的状态。

Event.pageX:是相对于整个页面的坐标，以页面左上角为坐标原点到鼠标所在点的水平距离(IE8不支持)

Event.pageY:是相对于整个页面的坐标，以页面左上角为坐标原点到鼠标点的垂直距离(IE8不支持)

Event.clientX:相对于可见区域的坐标，以浏览器可见区域的左上角为坐标原点到鼠标所在点的水平距离

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

相对于计算机屏幕的坐标，以屏幕左上角为坐标原点到鼠标所在点的水平距离

Event.screenY:是相对于电脑屏幕的坐标，以屏幕左上角为坐标原点到鼠标所在点的垂直距离。

Event.offsetX:相对于它自己的坐标，它自己的左上角填充作为从坐标原点到鼠标所在点的水平距离。

event . offset type :相对于自己的坐标，取自己的填充左上角作为坐标原点到鼠标所在点的水平距离。

摘要

以上是JS中获取网页各种高度和位置的方法总结，为大家学习JS提供了方便，有需要的朋友可以参考学习。