Jq_Js_Js、Jq获取浏览器和屏幕各种高度宽度
$(document).ready(function()
{
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
alert(screen.height);//显示器分辨率，只能用JavaScript代码获取
alert(screen.width);
})
</script>
|
Javascript:
alert(document.body.clientWidth); //网页可见区域宽(body)
alert(document.body.clientHeight); //网页可见区域高(body)
alert(document.body.offsetWidth); //网页可见区域宽(body)，包括border、margin等
alert(document.body.offsetHeight); //网页可见区域宽(body)，包括border、margin等
alert(document.body.scrollWidth); //网页正文全文宽，包括有滚动条时的未见区域
alert(document.body.scrollHeight); //网页正文全文高，包括有滚动条时的未见区域
alert(document.body.scrollTop); //网页被卷去的Top(滚动条)
alert(document.body.scrollLeft); //网页被卷去的Left(滚动条)
alert(window.screenTop); //浏览器距离Top
alert(window.screenLeft); //浏览器距离Left
alert(window.screen.height); //屏幕分辨率的高
alert(window.screen.width); //屏幕分辨率的宽
alert(window.screen.availHeight); //屏幕可用工作区的高
alert(window.screen.availWidth); //屏幕可用工作区的宽
Jquery
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height()); //浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true)); //浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width()); //浏览器当前窗口文档对象宽度
alert($(document.body).width()); //浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true)); //浏览器当前窗口文档body的总宽度 包括border padding margin
计算元素位置和偏移量
offset方法是一个很有用的方法，它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。
offset(options, results)
options.relativeTo 指定相对计 算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
options.scroll 是否把 滚动条计算在内，默认TRUE
options.padding 是否把padding计算在内，默认false
options.margin 是否把margin计算在内，默认true
options.border 是否把边框计算在内，默认true
jQuery，javascript，$(document)，height，width，高度，宽度
js得到屏幕宽高，页面宽高
window.screen.availWidth 返回当前屏幕宽度(空白空间)
window.screen.availHeight 返回当前屏幕高度(空白空间)
window.screen.width 返回当前屏幕宽度(分辨率值)
window.screen.height 返回当前屏幕高度(分辨率值)
window.document.body.offsetHeight; 返回当前网页高度
window.document.body.offsetWidth; 返回当前网页宽度
窗体最大化
1、
修改<body>为<body onload="max.Click()">为打开最大化窗口
修改<body>为<body onload="min.Click()">为打开最小化窗口
2、
以下代码加入<body>区域
<object id="min" type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="Minimize">
</object> <object id="max" type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="Maximize">
</object>
<!DOCTYPE html>
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<html>
<head>
<title>aaa</title>
</head>
<body>
<h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaa</h1>
<p>Welcome to aaa</p>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
</body>
</html> <script type="text/javascript">
alert(document.body.clientWidth);
alert(document.body.clientHeight);
alert(document.body.offsetWidth);
alert(document.body.offsetHeight); alert(document.body.scrollWidth);
alert(document.body.scrollHeight); alert(document.body.scrollTop);
alert(document.body.scrollLeft);
alert(window.screenTop);
alert(window.screenLeft);
alert(window.screen.height);
alert(window.screen.width);
alert(window.screen.availHeight);
alert(window.screen.availWidth); //alert($(document).height());
//alert($(document).width());
</script>
页面高度
设置窗口对象的高度的方法：
| 属性 | 描述 |
|---|---|
| innerHeight（innerWidth） | 设置窗口的内容区域的高度 |
| outerHeight（outerWidth） | 设置窗口高度 |
| screen.availHeight（screen.availWidth） | 高度，以像素为单位的工作区屏幕大小（不含工具栏的高度） |
| screen.height（screen.width） | 屏幕的高度（以像素为单位） |
| screenY（screenX） | 从屏幕顶部到浏览器窗口的上边界的距离 |
| scrollY（scrollX） | 文档垂直滚动的距离 |
| pageYOffset（pageXOffset） | 页面的当前垂直位置相对于窗口角最上方左侧 |
请注意，第一并非所有的浏览器都支持，第二，并非所有的属性值一致。另外，不要忘 记，这些都是针对窗口对象中的所有属性，这意味着它们只适用于窗口对象，所以你不能这样写document.getElementById（ID）.innerHeight等 但是，在测试过程中（IE 6, FF 2.0, Opera 9.25)），结果发现，所有的浏览器只支持window.screen.availHeight和 window.screen.height（见下面汇总表）。但是，在大多数情况下，这是不够的，它往往是要知道块或容器的高度，所以你应该寻找其他方式
| 属性 | 描述 |
|---|---|
| clientHeight（clientWidth） | 没有滚动条的高度 |
| scrollHeight（scrollWidth） | 包括滚动条的高度 |
| scrollTop（scrollLeft） | 当前位置相对于该块的上边界的垂直位移 |
| offsetHeight（offsetWidth） | 对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变 |
重要注意事项：这些属性需要在页面完全加载后才能使用，否则可能会有所不同，为什么呢？看下面的表...
汇总表
|
属性 |
没有定义DOCTYPE | 定义了！!DOCTYPE XHTML 1.0 Transitional | ||||
|---|---|---|---|---|---|---|
| ie浏览器（6） | FF（2.0） | Opera（9.25） | ie浏览器（6） | FF（2.0） | Opera（9.25） | |
|
window.innerHeight |
未定义 |
807 |
848 |
未定义 |
807 |
848 |
|
window.outerHeight |
未定义 |
979 |
911 |
未定义 |
979 |
911 |
|
window.screen.availHeight |
971 |
971 |
971 |
971 |
971 |
971 |
|
window.screen.height |
1024 |
1024 |
1024 |
1024 |
1024 |
1024 |
|
window.screenY |
未定义 |
-4 |
-23 |
未定义 |
-4 |
-23 |
|
window.scrollY |
未定义 |
变化取决于从滚动 |
未定义 |
未定义 |
变化取决于从滚动 |
未定义 |
|
window.pageYOffset |
未定义 |
变化取决于从滚动 |
变化取决于从滚动 |
未定义 |
变化取决于从滚动 |
变化取决于从滚动 |
|
document.body.clientHeight |
846 |
807 |
848 |
3196 |
3124 |
3136 |
|
document.body.scrollHeight |
3252 |
3202 |
3166 |
3196 |
3124 |
3136 |
|
document.body.scrollTop |
变化取决于从滚动 |
变化取决于从滚动 |
变化取决于从滚动 |
0 |
0 |
0 |
|
document.documentElement.scrollTop |
0 |
0 |
0 |
变化取决于从滚动 |
变化取决于从滚动 |
变化取决于从滚动 |
|
document.body.offsetHeight |
850 |
3192 |
848 |
3196 |
3124 |
3136 |
|
的document.getElementById（this_tbl）.clientHeight |
361 |
371 |
361 |
361 |
370 |
361 |
|
的document.getElementById（this_tbl）.scrollHeight |
361 |
371 |
361 |
361 |
370 |
361 |
|
的document.getElementById（this_tbl）.offsetHeight |
361 |
371 |
361 |
361 |
370 |
361 |
测试在您的浏览器（刷新页面点击下面refresh按钮就行测试）
| window.innerHeight | 916 | |
| window.outerHeight | 1020 | |
| window.screen.availHeight | 1020 | |
| window.screen.height | 1050 | |
| window.screenY | 0 | |
| window.scrollY | 0 | |
| window.pageYOffset | 0 | |
| document.body.clientHeight | 975 | |
| document.body.scrollHeight | 2412 | |
| document.body.scrollTop | 0 | |
| document.documentElement.scrollTop | 0 | |
| document.body.offsetHeight | 975 | |
| document.getElementById(tbl).clientHeight | 421 | |
| document.getElementById(tbl).scrollHeight | 421 | |
| document.getElementById(tbl).offsetHeight | 421 |
注： 表中的值取决于个人设置（工具栏，状态栏，字体大小等），所以他们可能会有所不同，即使你的浏览器版本是相同的。
结论
DOCTYPE影响上述参数的值;
在屏幕上确定高度时，你总是可以根据window.screen.height来确定;
找到一个页面或块元素的可见部分的高度使用的document.getElementById.（id）.clientHeight，包括滚动部分的- 的document.getElementById（ID）.scrollHeight。
Jq_Js_Js、Jq获取浏览器和屏幕各种高度宽度的更多相关文章
- Javascript&Jquery获取浏览器和屏幕各种高度宽度方法总结及运用
<js篇> Javascript获取浏览器和屏幕各种高度宽度方法总结 document.body.clientWidth //网页可见区域宽(body) document.bo ...
- Javascript、Jquery获取浏览器和屏幕各种高度宽度（单位都为px）
Javascript.Jquery获取浏览器和屏幕各种高度宽度 另外参见 http://www.cnblogs.com/top5/archive/2009/05/07/1452135.html ...
- JS、Jquery获取浏览器和屏幕各种高度宽度
网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth ...
- JS、JQUERY 获取浏览器和屏幕各种高度宽度
好长时间没有更新博客了... 把我最近积累的一点知识点放上博客,以后以备不需之要,也给大家整理一下.. Javascript: IE中:document.body.clientWidth ==> ...
- Javascript、Jquery获取浏览器和屏幕各种高度宽度
Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...
- Javascript、Jquery获取浏览器和屏幕各种高度宽度[mark]
Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...
- C#-WebForm-Javascript、Jquery获取浏览器和屏幕各种高度宽度
Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...
- jq获取浏览器可视窗口的高度
<script> var window_height = $(window).height(); </script>
- HTML 获取屏幕、浏览器、页面的高度宽度
本篇主要介绍Web环境中屏幕.浏览器及页面的高度.宽度信息. 目录 1. 介绍:介绍页面的容器(屏幕.浏览器及页面).物理尺寸与分辨率.展示等内容. 2. 屏幕信息:介绍屏幕尺寸信息:如:屏幕.软件可 ...
随机推荐
- Sql Server 中如果使用TransactionScope开启一个分布式事务，使用该事务两个并发的连接会互相死锁吗
提问: 如果使用TransactionScope开启一个分布式事务,使用该事务两个并发的连接会互相死锁吗? 如果在.Net中用TransactionScope开启一个事务. 然后在该事务范围内启动两个 ...
- JBoss EAP应用服务器部署方法和JBoss 开发JMS消息服务小例子
一.download JBoss-EAP-6.2.0GA: http://jbossas.jboss.org/downloads JBoss Enterprise Application Platfo ...
- 【Redis数据库】命令学习笔记——发布订阅、事务、脚本、连接等命令汇总
本篇基于redis 4.0.11版本,学习发布订阅.事务.脚本.连接的相关命令. Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息. 序号 ...
- python之demo1----改编自turtle.py文件中的demo
""" 改编自turtle.py自带demo 执行 python -m turtledemo 命令查看系统内置demo的源码 绘制:需要通过import turtle引入 ...
- web.config中的InProc模式 与 StateServer模式[转]
开发asp.net应用时,修改web.config中的SessionState节点. <sessionState mode="StateServer" stateConnec ...
- [Spark SQL_1] Spark SQL 配置
0. 说明 Spark SQL 的配置基于 Spark 集群搭建 && Hive 的安装&配置 1. 简介 Spark SQL 是构建在 Spark Core 模块之上的四大 ...
- 【转】Java十大常用框架介绍(spring系+dubbo+RabbitMQ+Ehcache+redis)
一.SpringMVC Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职责解耦,基于请求驱动 ...
- 【转】Android中通知的提示音、震动和LED灯效果小例子
通知(Notification)是 Android 系统中比较有特色的一个功能,当某个应用程序希望向用户发出一些提示信息,而该应用程序又不在前台运行时,就可以借助通知来实现.发出一条通知后,手机最上方 ...
- 包、继承、Super、方法重写
1 包_继承 1.1 包 包(package) 用于管理程序中的类,主要用于解决类的同名问题.包可以看出目录. 包的作用 [1] 防止命名冲突. [2] 允许类组成一个单元(模块),便于管理和维护 [ ...
- Node.js实战(三)之第一个Web服务器
这次的示例同样也可以说是HelloWorld,只不过不同的是这是web服务器示例. (1)编写web.js,内容如下: var http = require("http") fun ...