Javascript、Jquery获取浏览器和屏幕各种高度宽度（单位都为px）
Javascript、Jquery获取浏览器和屏幕各种高度宽度
另外参见 http://www.cnblogs.com/top5/archive/2009/05/07/1452135.html
Javascript:
IE中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
Opera中：
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
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 【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
1 <!DOCTYPE html> 2 <script src="jquery-1.5.1.min.js" type="text/javascript"></script> 3 <html> 4 <head> 5 <title>aaa</title> 6 </head> 7 <body> 8 <h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 9 aaaaaaaaaaaaaaaaaa</h1> 10 <p>Welcome to aaa</p> 11 <h1>aaa</h1> 12 <h1>aaa</h1> 13 <h1>aaa</h1> 14 <h1>aaa</h1> 15 <h1>aaa</h1> 16 <h1>aaa</h1> 17 <h1>aaa</h1> 18 <h1>aaa</h1> 19 <h1>aaa</h1> 20 <h1>aaa</h1> 21 <h1>aaa</h1> 22 <h1>aaa</h1> 23 <h1>aaa</h1> 24 </body> 25 </html> 26 27 <script type="text/javascript"> 28 alert(document.body.clientWidth); 29 alert(document.body.clientHeight); 30 alert(document.body.offsetWidth); 31 alert(document.body.offsetHeight); 32 33 alert(document.body.scrollWidth); 34 alert(document.body.scrollHeight); 35 36 alert(document.body.scrollTop); 37 alert(document.body.scrollLeft); 38 alert(window.screenTop); 39 alert(window.screenLeft); 40 alert(window.screen.height); 41 alert(window.screen.width); 42 alert(window.screen.availHeight); 43 alert(window.screen.availWidth); 44 45 //alert($(document).height()); 46 //alert($(document).width()); 47 </script>
Javascript、Jquery获取浏览器和屏幕各种高度宽度（单位都为px）的更多相关文章
- Javascript&Jquery获取浏览器和屏幕各种高度宽度方法总结及运用
<js篇> Javascript获取浏览器和屏幕各种高度宽度方法总结 document.body.clientWidth //网页可见区域宽(body) document.bo ...
- 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 ...
- JS、Jquery获取浏览器和屏幕各种高度宽度
网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth ...
- JS、JQUERY 获取浏览器和屏幕各种高度宽度
好长时间没有更新博客了... 把我最近积累的一点知识点放上博客,以后以备不需之要,也给大家整理一下.. Javascript: IE中:document.body.clientWidth ==> ...
- C#-WebForm-Javascript、Jquery获取浏览器和屏幕各种高度宽度
Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...
- Jq_Js_Js、Jq获取浏览器和屏幕各种高度宽度
$(document).ready(function() {alert($(window).height()); //浏览器当前窗口可视区域高度alert($(document).he ...
- js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下: document.body.offsetWidth doc ...
- js 和 jquery 获取页面和滚动条的高度 视口高度文档高度
js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...
随机推荐
- POJ 1684 Corn Fields(状压dp)
描述 Farmer John has purchased a lush new rectangular pasture composed of M by N (1 ≤ M ≤ 12; 1 ≤ N ≤ ...
- f5基本介绍
1.信息查看 1)登录: https://10.160.100.10 f5有2台,做HA IP地址分别为10.160.100.3和10.160.100.2 10.160.100.10为虚拟地址 2)基 ...
- 浅析java修饰符之public default protected private static final abstract
浅析java修饰符之public default protected private static final abstract 一 修饰符的作用:用来定义类.方法或者变量,通常放在语句的最前端 ...
- python使用elasticsearch模块操作elasticsearch
1.创建索引 命令如下 from elasticsearch import Elasticsearch es = Elasticsearch([{"host":"10.8 ...
- Laravel常用命令行中文版
1.生成控制器 php artisan make:controller ArticleController 对应的会在app/http/controllers下面生成ArticleController ...
- VIO回顾：从滤波和优化的视角
https://mp.weixin.qq.com/s/zpZERtWPKljWNAiASBLJxA 根据以上网页自己做的总结: 在机器人社区中,定位与构图问题属于状态估计问题.主流使用的工具可以对给定 ...
- mysql5.5以上my.ini中设置字符集
在mysql5.1之前数据库设置字符集: [mysqld] default-character-set = utf8 mysql5.5以后[mysqld]中就不能使用default-character ...
- 在windows7中配置ant环境变量
假设本地以及安装好JDK并且配置好环境变量. 新建/修改系统环境变量 ANT_HOME D:\develop\apache-ant-1.10.3 PATH %ANT_HOME%\bin ...
- Vue 初始化多个Vue 及之间的相互修改
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 初次搭建spring-boot 整合ssm（有许多小坑）
首先,我是采用官网下载,版本最好选择1.5.16的(这是重点) 下载完毕后,用idea打开解压后的项目. 1.整合spring-mvc 在pom.xml中加入web依赖 <dependency& ...