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)获取浏览器窗口可视区域(不包括滚动条)和滚动条位置的代码:

  1. // 获取浏览器窗口的可视区域的宽度
  2. function getViewPortWidth() {
  3. return document.documentElement.clientWidth || document.body.clientWidth;
  4. }
  5.  
  6. // 获取浏览器窗口的可视区域的高度
  7. function getViewPortHeight() {
  8. return document.documentElement.clientHeight || document.body.clientHeight;
  9. }
  10.  
  11. // 获取浏览器窗口水平滚动条的位置
  12. function getScrollLeft() {
  13. return document.documentElement.scrollLeft || document.body.scrollLeft;
  14. }
  15.  
  16. // 获取浏览器窗口垂直滚动条的位置
  17. function getScrollTop() {
  18. return document.documentElement.scrollTop || document.body.scrollTop;
  19. }

网页可见区域宽: 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. visio二次开发——图纸解析之线段

    多写博客,其实还是蛮好的习惯的,当初大学的时候导师就叫我写,但是就是懒,大学的时候,谁不是魔兽或者LOL呢,是吧,哈哈哈. 好了,接着上一篇visio二次开发——图纸解析,我继续写. 摘要: (转发请 ...

  2. Windows平台下Qt中glut库的使用

    用Qt中的QGLWidget窗体类中是不包括glut工具库的,难怪在myGLWidget(在我的程序中是QGLWidget的派生类)中绘制实心球体是说“glutSolidSphere”: 找不到标识符 ...

  3. php项目整理之no1

    1.login.php <head></head> 2.check_login.php 3.user.php 4.getData.php

  4. 初学者在ubuntu下安装使用git(下)

    4.将代码传到oschina上去 之前已经将git配置完成了,现在通过ssh的方式访问资源库,先要用命令 ssh-keygen –C '你的邮箱' –t rsa .这样就会在ssh文件夹下建一相应的密 ...

  5. T-SQL 语句的优化

    SQL调优. 1.索引是数据库调优的最根本的优化方法.聚簇索引.非聚簇索引. 聚簇索引:物理序与索引顺序相同.(只能有一个) 非聚簇索引:物理顺序与索引顺序不相同. 2.调整WHERE 子句中的连接顺 ...

  6. word20161211

    H.323 half-duplex / 半双工 handle count / 句柄数 handshaking / 握手 Hardware Compatibility List, HCL / 硬件兼容性 ...

  7. VS中批注的使用

    SAL 是 Microsoft 源代码注释语言. 使用源代码批注,可以使代码背后的意图更加清晰. 这些注释还可以使用自动化的静态分析工具更准确地分析代码,显著减少误判.那么什么是批注,举个简单的例子, ...

  8. VB中复制-粘贴-剪切键实现

    If Me.ActiveControl.GetType.BaseType.ToString = "System.Windows.Forms.TextBoxBase" Then Wi ...

  9. 【目录】python

    python 入门学习(一) 入门学习(二) 入门学习(三) 入门学习(四) 入门学习(五) 入门学习(六) 入门学习(七) 入门学习(八) 入门学习(九) 入门学习(十) Head First Py ...

  10. Ruby多行字符串,begin/end语句、注释

    #!/usr/bin/ruby #puts "Hello ,Ruby!"; print <<EOF #多行字符串 以<<开头 紧接着为结束字符串标识声明 并 ...