document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

看了以上代码,可能会有疑问说body和可见区域到底有什么不同呢,我们在console里运行一下会发现在不同的网页中有不同的情况值,有的document.body.clientWidth和document.documentElement.clientWidth 的值相同,有的却不同,原因在哪呢?

原因就是:在浏览器默认的情况下,body有8-10px左右的边距,而可见区域包括了这个边距,因此如果我们用到body{padding:0;margin:0;}来消除这种默认的情况。那么document.body.clientWidth和document.documentElement.clientWidth 的值就会相同。

以下是兼容主流浏览器(IE/Firefox/Chrome/Safari)获取浏览器窗口可视区域(不包括滚动条)和滚动条位置的代码:

 // 获取浏览器窗口的可视区域的宽度
function getViewPortWidth() {
return document.documentElement.clientWidth || document.body.clientWidth;
} // 获取浏览器窗口的可视区域的高度
function getViewPortHeight() {
return document.documentElement.clientHeight || document.body.clientHeight;
} // 获取浏览器窗口水平滚动条的位置
function getScrollLeft() {
return document.documentElement.scrollLeft || document.body.scrollLeft;
} // 获取浏览器窗口垂直滚动条的位置
function getScrollTop() {
return document.documentElement.scrollTop || document.body.scrollTop;
}

网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)

网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft

屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width

屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth

// 部分jQuery函数
$(window).height()  //浏览器时下窗口可视区域高度
$(document).height()    //浏览器时下窗口文档的高度
$(document.body).height()      //浏览器时下窗口文档body的高度
$(document.body).outerHeight(true) //浏览器时下窗口文档body的总高度 包括border padding margin
$(window).width()  //浏览器时下窗口可视区域宽度
$(document).width()//浏览器时下窗口文档对于象宽度
$(document.body).width()      //浏览器时下窗口文档body的高度
$(document.body).outerWidth(true) //浏览器时下窗口文档body的总宽度 包括border padding

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 相对文档的水平座标+垂直方向滚动的量

js获取网页屏幕可视区域高度的更多相关文章

  1. js获取网页屏幕可见区域高度

    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...

  2. [js]获取网页屏幕可见区域高度

    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...

  3. Js/Jquery获取网页屏幕可见区域高度

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下. 1 document.body.clientWidth ==> BODY对象宽度 2 document.body.clie ...

  4. 【转载】实用的Javascript获取网页屏幕可见区域高度

    本文转载原地址:这里 document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 docu ...

  5. 实用的Javascript获取网页屏幕可见区域高度

    本文转载原地址:这里 document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 docu ...

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

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

  7. js 获取 网页屏幕高度 窗口高度 元素高度 滚动高度

    常用: JS 获取浏览器窗口大小 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // 获取窗口宽度 if (window.innerWidth) winWidth = ...

  8. js获取手机屏幕宽度、高度

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  9. js获取浏览器窗口可视区域大小

    获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法: 一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: •  window.innerHeight - 浏 ...

随机推荐

  1. toolkit --------chart属性

    Data Visualization类组件以直观的图表方式显示数据的分布,能够让我们更好地分析各数据的内在联系.本文主要向大家介绍该类组件的基本特性以及使用实例. 一.基本特性介绍 1.chart组件 ...

  2. Ruby常用比较操作符

    操作符 含义 == 测试值是否相等 ==== 用来比较case语句的目标和每个when从句的项 <=>  通用比较操作符. 根据接受者小于, 等于, 大于其参数, 返回-1, 0. 1 & ...

  3. 我爱模仿app之格瓦拉客户端

    最近有很多人问我,这个效果该怎么实现,那个功能该怎么实现.所以我准备开个专题,找一些app模仿,写一些示例代码,以供大家参考. 第一个下手的就是格瓦拉,没用过的可以下载看看,效果做的还是可以的,专场, ...

  4. BitMap算法应用:Redis队列滤重优化

    工作中有用到Redis滤重队列. 原来的方法如下: 方法一 为了保证操作原子性,使用Redis执行Lua脚本. 在脚本中的逻辑是,如果队列不超过某个数值,进行一次lrem操作(队列使用list结构), ...

  5. javascript基础01

    javascript基础01 Javascript能做些什么? 给予页面灵魂,让页面可以动起来,包括动态的数据,动态的标签,动态的样式等等. 如实现到轮播图.拖拽.放大镜等,而动态的数据就好比不像没有 ...

  6. GCC 编译优化指南(转)

    GCC 编译优化指南(转) http://www.jinbuguo.com/linux/optimize_guide.html 作者:金步国 版权声明 本文作者是一位开源理念的坚定支持者,所以本文虽然 ...

  7. 【Eclipse】总结自己在工作中经常使用到的Eclipse快捷键

    一些我觉得比较有用的快捷键,仅作参考. 1.alt + shift + c :更改方法签名. 2.三次鼠标左键单击: 选中一整行. 3.alt + shift + d/x: 再按t : 运行junit ...

  8. ucenter用户登录过程

    以用户登录为例介绍,其它注销,改密码,消息,头像,好友均类同. 从用户xxx在某一应用程序的login.php,输入用户名,密码讲起.先用uc_user_login函数到uc_server验证此用户和 ...

  9. Openstack4j 在 Maven 中的构建

    什么是 Openstack4j ? OpenStack的官方SDK是基于Python语言的,对于Java程序猿来说,将Python翻译过来未免麻烦.在Openstack官方的Wiki中(戳我直达),我 ...

  10. 网络编程之socket

    网络编程之socket socket:在网络编程中的一个基本组件,也称套接字. 一个套接字就是socket模块中的socket类的一个实例. 套接字包括两个: 服务器套接字和客户机套接字 套接字的实例 ...