Js:如何获取屏幕的宽度和高度(浏览器兼容)。有需要的朋友可以参考一下。

屏幕的有效宽度和高度：

window . screen . avail height window . screen . avail width

网页可视区域的宽度：document . body . client网页可视区域的宽度高度：document . body . client网页可视区域的高度宽度：document.body.offsetWidth(包括边缘的宽度)可视网页的高度：document.body.offsetHeight(包括边缘线的宽度) 网页的全文宽度：document.body.scrollWidth网页的全文高度：被卷起的网页的高度：被卷起的网页的左侧：document . body . scroll高度网页：window.s屏幕的正文的左侧部分：window.screen左侧：屏幕分辨率的高度：屏幕分辨率的宽度：屏幕的可用工作区高度：window.screen高度屏幕的可用工作区宽度：window.screen。 availwidth精确定位：scrollleft，scrollwidth，clientwidth，offsetwidth scrollheight:获取对象的滚动高度。ScrollLeft:设置或获取对象左边界和窗口最左边内容之间的距离。scrollTop:设置或获取窗口中最顶端对象和最顶端内容之间的距离。scrollWidth:获取对象的滚动宽度。offsetHeight:获取对象的布局或由父坐标offsetParent属性指定。父坐标的高度offsetLeft:获取对象相对于布局或offsetParent属性指定的父坐标的计算左侧位置offsetTop:获取对象相对于布局或offsetTop属性指定的父坐标的计算顶部位置。event.clientX相对于文档的水平坐标。event.clientY相对于文档的垂直方向。容器的纵坐标event.offsetX是容器的横坐标，容器的纵坐标是document。DocumentElement。Scrolltop，是垂直滚动的值。事件的垂直滚动量。ClientxDocument。DocumentElement。Scrolltop相对于文档的水平坐标。

IE，FireFox的区别如下：

IE6.0、FF1.06:

clientWidth=宽度填充

clientHeight=高度填充

offsetWidth=填充边框宽度

offsetHeight=填充边框的高度

ie 5.0/5.5:client width=width-border

clientHeight=高度-边框

offsetWidth=宽度

偏高=高度

(需要提到的是，CSS中的margin属性与clientWidth、offsetWidth、clientHeight和offsetHeight无关)

-

技术要点本节代码主要使用了Document对象关于windows的一些属性。这些属性的主要功能和用法如下。

要得到窗口的大小，不同的浏览器需要使用不同的属性和方法：检测窗口的真实大小，需要使用Netscape下窗口的属性；在IE下，需要深入文档检测正文；在DOM环境下，如果想得到窗口的大小，需要注意的是根元素的大小，而不是元素的大小。

Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。

Document对象的body属性对应于HTML文档的标签。Document对象的documentElement属性代表HTML文档的根节点。

Document.body.clientHeight表示HTML文档所在窗口的当前高度。指示HTML文档所在窗口的当前宽度。

源程序的解释

(1)程序先建立一个有两个文本框的窗体，显示窗口当前的宽度和高度，其值会随着窗口大小的变化而变化。

(2)在后续的JavaScript代码中，首先定义了winWidth和winHeight两个变量来保存窗口的高度和宽度。

(3)然后在函数findDimensions()中，使用window.innerHeight和window.innerWidth获取窗口的高度和宽度，保存在前面提到的两个变量中。

(4)深入文档检测正文，得到窗口大小，存储在上面两个变量中。

(5)在函数结束时，通过按名称访问表单元素，结果被输出到两个文本框。

(6)在JavaScript代码的最后，通过调用findDimensions()函数完成整个操作。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。