JS获取浏览器窗口大小 -

ljz1318078262

浏览: 40730 次

最近访客更多访客>>

devcang

feiyue81

haiyupeter

Fly872365

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (56)

社区版块

存档分类

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.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文档所在窗口的当前宽度。

实现代码

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<title>请调整浏览器窗口</title>

<metahttp-equiv="content-type"content="text/html;charset=gb2312">

</meta></head>

<body>

<h2align="center">请调整浏览器窗口大小</h2><hr/>

<formaction="#"method="get"name="form1"id="form1">

浏览器窗口的实际高度:<inputtype="text"name="availHeight"size="4"/><br/>

浏览器窗口的实际宽度:<inputtype="text"name="availWidth"size="4"/><br/>

</form>

<scripttype="text/javascript">

<!--

varwinWidth=0;

varwinHeight=0;

functionfindDimensions()//函数：获取尺寸

{

//获取窗口宽度

if(window.innerWidth)

winWidth=window.innerWidth;

elseif((document.body)&&(document.body.clientWidth))

winWidth=document.body.clientWidth;

//获取窗口高度

if(window.innerHeight)

winHeight=window.innerHeight;

elseif((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=winHeight;

document.form1.availWidth.value=winWidth;

}

findDimensions();

//调用函数，获取数值

window.onresize=findDimensions;

//-->

</script>

</body>

</html>

分享到：

字母日期或时间元素表示示例 (java) | Jquery 选择器介绍

2014-11-05 18:29
浏览 303
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

（更新至2022年）城镇男性就业人员调查周平均工作时间.xls: 数据来源：中国人口与就业统计NJ-2023版

各地区技工院校综合情况(2022年).xls: 数据来源：中国劳动统计NJ-2023版

基于matlab实现样本熵算法，可用于提取生理信号的特征参数: 基于matlab实现样本熵算法，可用于提取生理信号的特征参数，运算速度较快，m=1或2；r=0.1_std(data)~0.25_std(data)最佳。.rar

蜂网-SCM车销访销业务.pptx: 蜂网_SCM车销访销业务.pptx

数据更新至2020年国民经济主要指标一览表.xls: 数据来源：中国电力统计NJ-2021版

图书借阅管理系统设计与实现及论大学生写作能力.docx: 图书借阅管理系统设计与实现及论大学生写作能力.docx

node-v10.19.0-linux-armv6l.tar.xz: Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

商品零售价格分类指数(2022年)(上年=100).xls: 数据来源：中国劳动统计NJ-2023版

数据更新至2020年电网建设本年开工规模.xls: 数据来源：中国电力统计NJ-2021版

基于数据服务的信息需求管理系统设计与实现.docx: 基于数据服务的信息需求管理系统设计与实现.docx

基于matlab实现的多个无人机的群飞行仿真多个无人机的群飞行仿真.rar: 基于matlab实现的多个无人机的群飞行仿真多个无人机的群飞行仿真.rar

#-001-mysql-快递管理系统ssm（毕设和论文）: 随着物流行业信息化的深入使得物流过程中货物的状态和变化透明化，现代信息化的接入使得物流成本和费用的更容易被掌握，从而增强了信息的准确性。与此同时动态信息能够被及时掌握，根据实际情况做出快速而有效的反应，实现物流运作的动态决策。信息的及时、全面的获取与加工，供需双方可以充分的信息共享与沟通，使得物流服务更准确、从而提高客户的满意度；同时顾客可以有更多自我服务功能，可以随意定义自己的定制的物流服务；另外在提供物流服务的同时，可以为顾客提供信息、资金等双赢的增值服务。该系统用spring mvc和MySQL实现了快递管理系统。快递管理系统有着很好的应用前景，随着计算机技术和网络技术的发展，它的功能将会得到不断的发展和完善。本系统可以根据实际应用的具体情况，适当加以修改，以便更好应用。本系统操作简单，灵活性好，系统安全性高，运行稳定。本文详细介绍了快递管理系统开发和设计的全过程。

各地区分行业其他单位就业人员和工资总额(2022年).xls: 数据来源：中国劳动统计NJ-2023版

node-v11.14.0-darwin-x64.tar.xz: Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

基于VB实现的医疗纠纷检索系统设计(源代码+系统).zip: 【作品名称】：基于VB实现的医疗纠纷检索系统设计(源代码+系统) 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。

数据更新至2020年分布式太阳能发电情况.xls: 数据来源：中国电力统计NJ-2021版

node-v11.3.0-linux-arm64.tar.xz: Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

农村居民分地区人均可支配收入来源(2022年).xls: 数据来源：中国劳动统计NJ-2023版

tensorflow-rocm-2.13.1.600-cp39-cp39-manylinux2014-x86-64.whl: cnn

node-v10.14.1-linux-arm64.tar.xz: Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。

最近访客 更多访客>>