屏幕对象

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

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对象

在介绍元素对象的各种高度和宽度之前，有必要解释盒子模型

默认盒子模型盒子尺寸：内容盒子；

框宽=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此时，scroll bar width=0 offset with :返回元素的宽度，包括边框和填充，但不包括边距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不支持)，以页面左上角为原点的鼠标点的垂直距离(IE8不支持)，以及event.clientX:相对于可见区域的坐标。以浏览器可视区域左上角为坐标原点，水平距离事件. event.clientY:相对可视区域坐标，垂直距离事件. screen :相对电脑屏幕坐标。Event.screenY:以屏幕左上角为坐标原点，从event.offsetX:到鼠标点相对于自身坐标的水平距离，以自身填充左上角为坐标原点。

以上总结的用javascript获取网页各种高度和位置的方法，都是边肖分享的内容，希望能给大家一个参考和支持。