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

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获取浏览器窗口_计算机软件及应用_IT/计算机_专业资料。JS 获取浏览器窗口大小...屏幕分辨率的宽:"+ window.screen.width; s += " 屏幕可用工作区高度:"+ ...
JS中浏览器窗体详解
js获取浏览器高度和宽度值 5页 免费如要投诉违规内容...屏幕分辨率的高:window.screen.height 屏幕分辨率的宽...要得到窗口的尺寸,对于不同的浏览器,需要使用不同...
JS阶段考试 -答案
Window 对象表示浏览器窗口,可用于检索有关窗口...在当前页面的同一目录下有一名 show.js 的文件, ...gerTime 26、 那一个对象可以获得屏幕大小 ( B...
根据浏览器和屏幕分辩率调用不同的css文件的js代码
根据浏览器屏幕分辩率调用不同的css文件的js代码_电脑基础知识_IT/计算机_专业资料。根据浏览器屏幕分辩率调用不同的css文件的js代码根据...
JS中的BOM
JS中的BOM_计算机软件及应用_IT/计算机_专业资料。...浏览器导航对象,存放浏览器的信息 浏览器屏幕对象 ...的高度 outerWidth 获取浏览器本身的宽度 窗口大小...
Javascript考试题目选择题
("Hello World") 2、JS 特性不包括( D ) A....A. Window 对象表示浏览器窗口,可用于检索有关...那一个对象可以获得屏幕大小( ) A. window B....
JavaScript考试试卷
在 JavaScript 中能实现每隔一秒调用函数 foo( )的...使用 javascript 中的浏览器对象实现在当前窗口打开...运行后在网页上显示(D).(选 择一项) var now =...
Javascript考试题目选择题
x<=10 C.x<20 D.x<=20 8、JS 语句 (B) ...A. Window 对象表示浏览器窗口,可用于检索有关...那一个对象可以获得屏幕大小( ) A. window B....
JS获取浏览器刷新、关闭事件
{ return "是否离开当前页面?"; } } function UnLoadEvent() { DispClose =...JS获取屏幕,浏览器,网页... 3页 免费 js获取浏览器高度宽度... 暂无...
js获取浏览器和操作系统版本
js获取浏览器和操作系统版本_互联网_IT/计算机_专业资料。Js 可以通过 window.navigator.userAgent 的信息来获取当前浏览器和客户端操作系统的版本 信息。 window....
更多相关标签: