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. 循环中的continue功能

    在oracle存储过程中,有时我们希望在循环中为某种情况时不做任何处理,类似于c语言中的continue,跳过本次循环:在oracle 11g中好像增加了这个关键字,在之前版本中我们可以通过如下方式来 ...

  2. AOP基本名词解释

  3. Linux进程间通信(五):信号量 semget()、semop()、semctl()

    这篇文章将讲述别一种进程间通信的机制——信号量.注意请不要把它与之前所说的信号混淆起来,信号与信号量是不同的两种事物.有关信号的更多内容,可以阅读我的另一篇文章:Linux进程间通信 -- 信号.下面 ...

  4. css中为了清除浮动经常用到的after样式

    .cf:after { display: block; visibility: hidden; width:; height:; line-height:; font-size:; clear: bo ...

  5. js操作数组的一些小技巧

    1.从数组中随机获取成员 var items = [12, 548 , 'a' , 2 , 5478 , 'foo' , 8852, , 'Doe' , 2145 , 119]; var  rando ...

  6. Vue in 2016

    原文链接:Vue in 2016 Vue 作者尤雨溪对 Vue 在 2016 年的总结以及未来的展望 现在已经是2016的尾声了!在这过去的12个月里,Vue的持续增长速度已经超过了我的预期--这个项 ...

  7. Java连接mysql数据库并插入中文数据显示乱码

    连接数据库设置编码 jdbc:mysql://地址:3306/数据库名?characterEncoding=utf8

  8. jQuery插件写法总结以及面向对象方式写法总结

    前两个是jQuery插件,后面2个是以对象的形式开发,都类似. 写法一 (function($, window){ // 初始态定义 var _oDialogCollections = {}; // ...

  9. .NET LINQ 数据分组

    数据分组      分组指将数据放入组中以便每个组中的元素共享公共特性的操作.   方法 方法名 说明 C# 查询表达式语法 Visual Basic 查询表达式语法 更多信息 GroupBy 对共享 ...

  10. node01-创建服务器

    node学习笔记目录:node01-创建服务器 node02-util node03-events node04-buffer node05-fs node06-path node07-http no ...