浏览器窗口可视区域大小
获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:
一、对于IE9+、Chrome、Firefox、Opera 以及 Safari：

  1. • window.innerHeight // - 浏览器窗口的内部高度
  2. • window.innerWidth // - 浏览器窗口的内部宽度

二、对于 Internet Explorer 8、7、6、5：

  1. • document.documentElement.clientHeight //表示HTML文档所在窗口的当前高度。
  2. • document.documentElement.clientWidth //表示HTML文档所在窗口的当前宽度。

或者
Document对象的body属性对应HTML文档的<body>标签

  1. • document.body.clientHeight
  2. • document.body.clientWidth

在不同浏览器都实用的 JavaScript 方案：

  1. var w= document.documentElement.clientWidth || document.body.clientWidth;
  2. var h= document.documentElement.clientHeight || document.body.clientHeight;

网页尺寸scrollHeight
scrollHeight和scrollWidth，获取网页内容高度和宽度。
一、针对IE、Opera:
　　scrollHeight 是网页内容实际高度，可以小于 clientHeight。
二、针对NS、FF:
　　scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。
三、浏览器兼容性

  1. var w=document.documentElement.scrollWidth || document.body.scrollWidth;
  2. var h=document.documentElement.scrollHeight || document.body.scrollHeight;

区分大小写scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。

网页尺寸offsetHeight
offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。
一、值

  1. offsetHeight = clientHeight + 滚动条 + 边框。

二、浏览器兼容性

  1. var w= document.documentElement.offsetWidth || document.body.offsetWidth;
  2. var h= document.documentElement.offsetHeight || document.body.offsetHeight;

网页卷去的距离与偏移量
我们先来看看下面的图：

scrollLeft: 设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ，即左边灰色的内容。
scrollTop: 设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ，即上边灰色的内容。
offsetLeft: 获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。
offsetTop: 获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。

1. 区分大小写
2. offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。

例：

  1.  <!DOCTYPE HTML>
  2.  <head>
  3.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4.  <script type="text/javascript">
  5.      function req(){
  6.          var div = document.getElementById("div1");
  7.          document.getElementById("li1").innerHTML = (div.offsetTop)+"px";//div1距离屏幕顶部的距离
  8.          document.getElementById("li2").innerHTML = (div.offsetLeft)+"px";//div1距离屏幕左部的距离
  9.          document.getElementById("li3").innerHTML = (div.scrollTop)+"px";//div1纵向滚动条滚动的距离
  10.          document.getElementById("li4").innerHTML = (div.scrollLeft)+"px";//div1横向滚动条滚动的距离
  11.       }
  12.  </script>
  13.  </head>
  14.  <body style="border:10px solid #ccc;padding:0px 0px;margin:5px 10px">
  15.      <div style="width:60%;border-right:1px dashed red;float:left;">
  16.          <div style="float:left;">
  17.              <div id="div1" style="border:5px red solid;height:300px;width:200px;overflow:auto">
  18.                  <div style="height:500px;width:400px">请调整横竖滚动条后，点击按钮后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。
  19.                  </div>
  20.              </div>
  21.              <input type="button" value="点击我!" onclick="req()" style="border: 1px solid purple;height: 25px;"/>
  22.          </div>
  23.      </div>
  24.      <div style="width:30%;float:left;">
  25.          <ul style="list-style-type: none; line-height:30px;">结果：
  26.              <li>offsetTop : <span id="li1"></span></li>
  27.              <li>offsetLeft : <span id="li2"></span></li>
  28.              <li> scrollTop : <span id="li3"></span></li>
  29.              <li>scrollLeft : <span id="li4"></span></li>
  30.          </ul>
  31.      </div>
  32.      <div style="clear:both;"></div>
  33.  </body>
  34.  </html>

Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理的更多相关文章

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

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

  2. JavaScript--DOM浏览器窗口可视区域大小

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

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

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

  4. Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理

    节点属性在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType : ...

  5. Javascript进阶篇——(DOM—节点---插入、删除和替换元素、创建元素、创建文本节点)—笔记整理

    插入节点appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点.语法: appendChild(newnode) //参数: //newnode:指定追加的节点. 为ul添加一 ...

  6. 二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素

    1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...

  7. javascript中求浏览器窗口可视区域兼容性写法

    1.浏览器窗口可视区域大小 1.1 对于IE9+.Chrome.Firefox.Opera 以及 Safari:•  window.innerHeight - 浏览器窗口的内部高度•  window. ...

  8. Android获取窗口可视区域大小: getWindowVisibleDisplayFrame()

    getWindowVisibleDisplayFrame()方法 getWindowVisibleDisplayFrame()是View类下的一个方法,从方法的名字就可以看出,它是用来获取当前窗口可视 ...

  9. Javascript进阶篇——(DOM—认识DOM、ByName、ByTagName)—笔记整理

    认识DOM文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 将HTML代码分解 ...

随机推荐

  1. 使用OpenXml实现生成数据字典文档(beta)

    最近项目在走验收流程,之前没有仔细看SOW文档,发现需要补好多份文档,其中就有数据字典,项目组不愿意花时间太多的时间弄这些文档,也不希望以后还要重复劳动力,最终决定做一个工具,方便自己生成数据字典文档 ...

  2. IDEA - Project files cannot be watched (are they under network mount?)

    在64位Linux系统上使用IDEA时遇到如下问题,启动时警告信息External file changes sync may be slow Project files cannot be watc ...

  3. ionic开发ios app

    注意必须是mac系统 1. 首先要安装node环境,Ionic的安装和后续的许多前端工具的安装都依赖于node的包管理器npm. nodeJs环境的安装很简单,去官网下载最新版的NodeJs直接安装即 ...

  4. shell中的declare命令

    declare命令有如下选项: -a 声明一个数组 -i 声明一个整型 -f 打印所有函数定义 -F 仅打印函数名字 -r 声明一个readonly变量,该变量的值无法改变,并且不能为unset -x ...

  5. php魔术方法——属性重载方法

    php有一类很神奇的方法,这些方法是保留方法,通常不会在外部被显式调用,他们使用双下划线(__)开头,他们被称为魔术方法(Magic Methods).php官方也不建议定义其他双下划线开头的方法. ...

  6. linux 常用压缩工具快速指南

    .tar 解包:tar xvf FileName.tar 打包:tar cvf FileName.tar DirName (注:tar是打包,不是压缩!) ——————————————— .gz 解压 ...

  7. 使用Android平板编程，执行linux命令

    android有一些应用支持开发, AIDE 介绍http://www.wandoujia.com/apps/com.aide.ui https://play.google.com/store/app ...

  8. cf C. Dima and Salad

    http://codeforces.com/contest/366/problem/C 转化为背包问题,可以将a[i]-b[i]*k看成重量,a[i]为价值: 因为a[i]-b[i]*k可以为负数,所 ...

  9. 基于QT开发的第三方库

    基于Qt开发的第三方库 分类: Qt2014-02-12 11:34 1738人阅读 评论(0) 收藏 举报 QT第三方库   目录(?)[+]   文章来源:http://blog.csdn.net ...

  10. logstash tomcat catalina.out zabbix 插件不会引起崩溃

    input { file { type => "zj_api" path => ["/data01/applog_backup/zjzc_log/zj-api ...