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 & ...
随机推荐
- jsplumb流程器使用3--connector
jsPlumb.getInstance内可以放一个对象 对象内可选地提供默认值: connector: 连接器(直线--a straight line, 贝塞尔曲线--a Bezier curv ...
- Beanstalkd消息队列的安装与使用
一.Beanstalkd是什么? Beanstalkd是一个高性能,轻量级的分布式内存队列 二.Beanstalkd特性 1.支持优先级(支持任务插队)2.延迟(实现定时任务)3.持久化(定时把内存中 ...
- C语言的那些事
变量的存数类型: 1:静态变量:凡是在代码任何快之外声明的变量总是存储在静态内存内,也就是不属于堆栈的内存. 对于这类变量.你无法对它们制指定存储类型. 2:存储于堆栈中,称为自动变量.当程序执行到声 ...
- Sublime Text3 常用快捷键必看
Sublime Text3 常用快捷键必看 https://blog.csdn.net/md1688/article/details/53043525
- css 边距等常用设置
前端知识 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- c# sharpsvn 客户端开发总结
判断文件夹是否是 working copy 工作副本两个方法 if (!IsWorkingCopy(localPath))//查看某目录是否是受svn管理的状态, 即是否为工作副本 { notiny ...
- 学习javascript怎么入门,初学者5条建议
你是否已经初步掌握了html和css,但完全不知道从何入手Java?如果是,这里总结了5条建议,帮助JavaScript初学者总结学习方法,提高学习效率. 一.多看视频少看书 对初学者而言,看书的效率 ...
- 1N - 计算球体积
根据输入的半径值,计算球的体积. Input 输入数据有多组,每组占一行,每行包括一个实数,表示球的半径. Output 输出对应的球的体积,对于每组输入数据,输出一行,计算结果保留三位小数. Sam ...
- js分割数字
var str = "123"; var b = String(str).split(''); 打印b[0].b[1].b[2]看效果...
- 转录组的组装Stingtie和Cufflinks
转录组的组装Stingtie和Cufflinks Posted: 十月 18, 2017 Under: Transcriptomics By Kai no Comments 首先这两款软件都是用 ...