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>

网页可见区域宽： 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

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> <object id="max" type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">

</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. 屏幕信息:介绍屏幕尺寸信息:如:屏幕.软件可 ...

随机推荐

购物商城学习--第三讲（tomcat插件启动web工程）
此处提到的tomcat插件即maven工程集成的tomcat插件,可以在添加maven的tomcat插件之后,在本地通过脚本或者命令行方式运行web工程,tomcat插件启动只需要修改一个端口即可,非 ...
176条DevOps人员常用的linux命令速查表
线上查询及帮助命令文件和目录操作命令查看文件及内容处理命令文件压缩及解压缩命令信息显示命令搜索文件命令用户管理命令基础网络操作命令深入网络操作命令有关磁盘与文件系统的命令系统权 ...
python下以api形式调用tesseract识别图片验证码
一.背景之前在博文中介绍在python中如何调用tesseract ocr引擎,当时主要介绍了shell模式,shell模式需要安装tesseract程序,并且效率相对略低. 今天介绍api形式的调 ...
Win7下设置护眼的电脑豆沙绿界面
控制面板\所有控制面板项\个性化\窗口颜色和外观 "色调"(Hue)设为85,"饱和度"(Sat)设为90,"亮度" (Lum)设为205. ...
[转]搭建Keepalived+Nginx+Tomcat高可用负载均衡架构
[原文]https://www.toutiao.com/i6591714650205716996/ 一.概述初期的互联网企业由于业务量较小,所以一般单机部署,实现单点访问即可满足业务的需求,这也是最 ...
MySQL基础之外键参照讲解
外键: 定义:如果表A的主关键字是表B中的字段,则该字段称为表B的外键,表A称为主表,表B称为从表. 作用:外键是用来实现参照完整性的,不同的外键约束方式将可以是两张表紧密的结合起来.比如修改或者删除 ...
Django商城项目笔记No.7用户部分-注册接口-判断用户名和手机号是否存在
Django商城项目笔记No.7用户部分-注册接口-判断用户名和手机号是否存在判断用户名是否存在后端视图代码实现,在users/view.py里编写如下代码 class UsernameCount ...
saltstack二次开发（二）
Saltstack的api Salt-api有两种方式,一种是函数的形式,有人家定义好的函数,我们可以直接调用,直接写python代码调用函数或者类就可以了.第二种形式是salt-api有封装好的ht ...
Redis系列七：redis持久化
redis支持RDB和AOF两种持久化机制,持久化可以避免因进程退出而造成数据丢失一.RDB持久化 RDB持久化把当前进程数据生成快照(.rdb)文件保存到硬盘的过程,有手动触发和自动触发手动触发 ...
[题目] Luogu P1312 Mayan游戏
题面题目描述 $ Mayan puzzle $是最近流行起来的一个游戏.游戏界面是一个 $7行 \times 5列$的棋盘,上面堆放着一些方块,方块不能悬空堆放,即方块必须放在最下面一行,或者放 ...

Jq_Js_Js、Jq获取浏览器和屏幕各种高度宽度

Jq_Js_Js、Jq获取浏览器和屏幕各种高度宽度的更多相关文章

随机推荐

热门专题