网页可见区域宽: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 相对文档的水平座标+垂直方向滚动的量

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

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

  1. Javascript、Jquery获取浏览器和屏幕各种高度宽度(单位都为px)

    Javascript.Jquery获取浏览器和屏幕各种高度宽度 另外参见    http://www.cnblogs.com/top5/archive/2009/05/07/1452135.html ...

  2. Javascript&Jquery获取浏览器和屏幕各种高度宽度方法总结及运用

    <js篇> Javascript获取浏览器和屏幕各种高度宽度方法总结 document.body.clientWidth       //网页可见区域宽(body) document.bo ...

  3. JS、JQUERY 获取浏览器和屏幕各种高度宽度

    好长时间没有更新博客了... 把我最近积累的一点知识点放上博客,以后以备不需之要,也给大家整理一下.. Javascript: IE中:document.body.clientWidth ==> ...

  4. Javascript、Jquery获取浏览器和屏幕各种高度宽度

    Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...

  5. Javascript、Jquery获取浏览器和屏幕各种高度宽度[mark]

    Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...

  6. C#-WebForm-Javascript、Jquery获取浏览器和屏幕各种高度宽度

    Javascript: IE中:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度d ...

  7. js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下: document.body.offsetWidth doc ...

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

    $(document).ready(function()         {alert($(window).height()); //浏览器当前窗口可视区域高度alert($(document).he ...

  9. js基础--获取浏览器当前页面的滚动条高度的兼容写法

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在开发中,兼容性问题是最常见的,今天就来介绍一下关于获取滚动条高度的兼容性写法,宽度同理,我在这里就不一一解释了 各浏览器 ...

随机推荐

  1. 20165101刘天野 2018-2019-2《网络对抗技术》Exp3 免杀原理与实践

    20165101刘天野 2018-2019-2<网络对抗技术>Exp3 免杀原理与实践 1. 实践内容 1.1 正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil- ...

  2. 20145109 《Java程序设计》第五周学习总结

    20145109 <Java程序设计>第五周学习总结 教材学习内容总结 Chapter 8 Exception Handling try, catch All Exceptions are ...

  3. 用WAR的方式部署SpringBoot项目

    接SpringBoot 快速入门(Eclipse) 步骤一:部署方式 Springboot 和 web 应用程序不一样,其本质上是一个 Java 应用程序,那么又如何部署呢? 通常来说,Springb ...

  4. 【bzoj1115】[POI2009]石子游戏Kam(博弈论)

    题目传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=1115 观察问题,我们能发现前后相邻两堆石子的数量差一定非负,而我们在第i堆石子中移走k ...

  5. Google protobuf序列化以及反序列化

    序列化的目的是将对象持久化到硬盘或者用于网络传输.java也提供了序列化技术,非常简单,只要实现Serializable接口即可.如下: public class commonService impl ...

  6. Rancher + K8S RestApi使用

      1前言 1.1使用的软件及版本 软件 版本号 Rancher 1.6stable Kubernetes 1.8.3 Docker 1.12.6 1.2 Rancher与K8S的RESTAPI差异 ...

  7. MarkDown中锚的使用

    经常使用Markdown配合Mou编辑器来些点总结和文档,但是其中需要前后引用或链接时markdown木有提供直接的方式.当然,Markdown支持嵌入式HTML语法,so..实现起来也没啥问题. 具 ...

  8. Memcached 连接

    我们可以通过 telnet 命令并指定主机ip和端口来连接 Memcached 服务. 语法 telnet HOST PORT 命令中的 HOST 和 PORT 为运行 Memcached 服务的 I ...

  9. antd 表单双向绑定的研究

    痛点 在使用antd的表单时,大家觉得不够清爽,总结如下: 大量的模板语法,需要一定的学习成本. 需要手动地进行数据绑定,使用大量的onChange/setFieldsValue去控制数据. 无法通过 ...

  10. PHP的可变变量名

    有时候可变的变量名会给编程带来很大的方便.也就是说变量名可以被动态的命名和使用.通常变量通过下面这样的语句来命名 : 1 2 3 <!--?php $a = 'hello'; ?--> 可 ...