当前位置:首页 >> 电力/水利 >>

JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度


JS 获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度发表于 2010-04-21 1737 次 标签 网页 网页可见区域宽: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 获取对象的滚动高度。

点击 202

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.05.5: clientWidth = width - border clientHeight = height - border offsetWidth = width offsetHeight = height (需要提一下:CSS 中的 margin 属性,与 clientWidth、offsetWidth、clientHeight、 offsetHeight 均无关) 网页可见区域宽: 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 ------------------- 技术要点 本节代码主要使用了 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 文档所在窗口的当前宽度。 实现代码: !DOCTYPE html PUBLIC -W3CDTD XHTML 1.0 TransitionalENhttpwww.w3.orgTRxhtml1DTDxhtml1-transitional.dtdhtml xmlns=httpwww.w3.org1999xhtmlheadtitle 请 调 整 浏 览 器 窗 口 titlemeta http-equiv=content-type content=texthtml; charset=gb2312head body h2 align=center 请调整浏览器窗口大小 h2hrform action=# method=get name=form1 id=form1!--显示浏览器窗口的实际尺寸--浏览器窗口 的 实际高度 input type=text name=availHeight size=4br 浏览器窗口 的 实际宽度 input type=text name=availWidth size=4brform script type=textjavascript!-- var winWidth = 0; var winHeight = 0; function findDimensions() 函数:获取尺寸 { 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; 获 取 窗 口 高 度 if (window.innerHeight) winHeight = window.innerHeight; else if ((document.body) && (document.body.clientHeight)) winHeight = document.body.clientHeight; 通 过 深 入 Document 内 部 对 body 进 行 检 测 , 获 取 窗 口 大 小 if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) { winHeight = document.documentElement.clientHeight; winWidth = document.documentElement.clientWidth; } 结 果 输 出 至 两 个 文 本 框 document.form1.availHeight.value= httpblog.soso.comqz.qwinHeight; document.form1.availWidth.value= winWidth; } findDimensions(); 调用函数,获取数值 window.onresize=findDimensions;--script

</body></html> 源程序解读 (1) 程序首先建立一个表单, 包含两个文本框, 用于显示窗口当前的宽度和高度, 并且, 其数值会随窗口大小的改变而变化。 (2)在随后的 JavaScript 代码中,首先定义了两个变量 winWidth 和 winHeight,用于 保存窗口的高度值和宽度值。 (3) 然后, 在函数 findDimensions ( )中, 使用 window.innerHeight 和 window.innerWidth 得到窗口的高度和宽度,并将二者保存在前述两个变量中。

(4)再通过深入 Document 内部对 body 进行检测,获取窗口大小,并存储在前述两个变 量中。 (5)在函数的最后,通过按名称访问表单元素,结果输出至两个文本框。 (6)在 JavaScript 代码的最后,通过调用 findDimensions ( )函数,完成整个操作。


相关文章:
JS 获取浏览器和屏幕宽高信息
JS 获取浏览器屏幕宽高信息 网页可见区域宽:document.body.clientWidth 网页...包含两个文本框,用于显示窗口当前的宽度和高度,并且,其数 值会随窗口大小的...
获取浏览器窗口的可视区域高度和宽度
获取浏览器窗口的可视区域高度宽度_计算机软件及应用_IT/计算机_专业资料。获取...js 获取浏览器高度宽度... 4页 1下载券 js获取浏览器高度宽度... 5...
js获取浏览器中Window窗口的宽高
js获取浏览器中Window窗口的宽高_IT/计算机_专业资料。使用js获取window和document...屏幕可用工作区高度:window.screen.availHeight 屏幕可用工作区宽度:window.screen...
用js小类库获取浏览器的高度和宽度信息===
js小类库获取浏览器高度宽度信息===_计算机软件及应用_IT/计算机_专业...网页正文部分左: window.screenLeft 屏幕分辨率的高: window.screen.height 屏幕...
JS,Jquery获取各种屏幕的宽度和高度
JS,Jquery 获取各种屏幕宽度高度 Javascript: 网页可见区域宽: document.body...浏览器当前窗口可视区域宽度 alert($(document).width());//浏览器当前窗口...
Js获得浏览器的基本信息窗口大小,滚动条高度(document...
Js获得浏览器的基本信息窗口大小,滚动条高度(document对象)文库网页可见区域宽:...window.screen.availHeight 屏幕可用工作区宽度:window.screen.availWidth HTML ...
JS获取浏览器的高度和宽度
JS获取屏幕,浏览器,网页... 1页 1下载券 JS获取浏览器窗口大小 获... 3页...获取浏览器的高度宽度 JS 获取浏览器的高度宽度 IE 中: document.body....
js获取浏览器高度和宽度值(多浏览器)
JS获取屏幕,浏览器,网页高... 1页 1财富值 JS获取浏览器窗口大小 获取......js 获取浏览器高度宽度值(多浏览器) 收藏 IE 中: document.body.clientWidth...
Css浏览器窗口宽度判断
(max-device-width: 600px)" href="abc.css" /> 如果屏幕宽度在 400 像素...JS获取浏览器窗口大小 获... 2页 1下载券 CSS 宽度——CSS width 5页 ...
JS获取浏览器高和宽
Js 获取当前浏览器的高和宽度 function scroll() { //alert(typeof document....==>页面对象高度(即 BODY 对象高度加上 Margin 高) 网页可见区域宽: document...
更多相关标签: