JS 获取浏览器窗口大小--获取屏幕、浏览器、网页高度宽度及经典示例

最新推荐文章于 2021-07-29 10:17:51 发布

jerryzhao58

最新推荐文章于 2021-07-29 10:17:51 发布

阅读量808

点赞数

分类专栏：笔记文章标签：浏览器 firefox opera 文档 html ie

笔记专栏收录该内容

37 篇文章 0 订阅

订阅专栏

JS 获取浏览器窗口大小--获取屏幕、浏览器、网页高度宽度及经典示例

JS 获取浏览器窗口大小

网页可见区域

网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft

屏幕分辨率

屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width

屏幕可用工作区

屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth

HTML 精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标
offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由
offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由
offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE，FireFox 差异如下：

IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border

IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height

(需要提一下：CSS 中的 margin 属性，与 clientWidth、offsetWidth、clientHeight、 offsetHeight 均无关)

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

要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：
若要检测窗口的真实尺寸，在 Netscape 下需要使用 Window 的属性；
在 IE 下需要深入 Document 内部对 body 进行检测；
在 DOM 环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。

Window 对象的 innerWidth 属性包含当前窗口的内部宽度。
Window 对象的 innerHeight 属性包含当前窗口的内部高度。
Document 对象的 body 属性对应 HTML 文档的标签。
Document 对象的 documentElement 属性则表示 HTML 文档的根节点。
document.body.clientHeight 表示 HTML 文档所在窗口的当前高度。
document.body. clientWidth 表示 HTML 文档所在窗口的当前宽度。

实现代码

在IE、FireFox、Opera下都可以使用

document.body.clientWidth
document.body.clientHeight
即可获得，很简单，很方便。
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight

在W3C的标准下如果在页面中添加下面这行标记的话
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在IE中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在Opera中：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

而如果没有定义W3C的标准，则
IE为：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
Opera为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）