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

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

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

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

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

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

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

• document.body.clientHeight

• document.body.clientWidth

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

var w= document.documentElement.clientWidth || document.body.clientWidth;

var h= document.documentElement.clientHeight || document.body.clientHeight;

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

var w=document.documentElement.scrollWidth || document.body.scrollWidth;

var h=document.documentElement.scrollHeight || document.body.scrollHeight;

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

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

offsetHeight = clientHeight + 滚动条 + 边框。

二、浏览器兼容性

var w= document.documentElement.offsetWidth || document.body.offsetWidth;

var h= document.documentElement.offsetHeight || document.body.offsetHeight;

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

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

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

例：

 <!DOCTYPE HTML>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <script type="text/javascript">

     function req(){

         var div = document.getElementById("div1");

         document.getElementById("li1").innerHTML = (div.offsetTop)+"px";//div1距离屏幕顶部的距离

         document.getElementById("li2").innerHTML = (div.offsetLeft)+"px";//div1距离屏幕左部的距离

         document.getElementById("li3").innerHTML = (div.scrollTop)+"px";//div1纵向滚动条滚动的距离

         document.getElementById("li4").innerHTML = (div.scrollLeft)+"px";//div1横向滚动条滚动的距离

      }

 </script>

 </head>

 <body style="border:10px solid #ccc;padding:0px 0px;margin:5px 10px">

     <div style="width:60%;border-right:1px dashed red;float:left;">

         <div style="float:left;">

             <div id="div1" style="border:5px red solid;height:300px;width:200px;overflow:auto">

                 <div style="height:500px;width:400px">请调整横竖滚动条后，点击按钮后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。

                 </div>

             </div>

             <input type="button" value="点击我!" onclick="req()" style="border: 1px solid purple;height: 25px;"/>

         </div>

     </div>

     <div style="width:30%;float:left;">

         <ul style="list-style-type: none; line-height:30px;">结果：

             <li>offsetTop : <span id="li1"></span></li>

             <li>offsetLeft : <span id="li2"></span></li>

             <li> scrollTop : <span id="li3"></span></li>

             <li>scrollLeft : <span id="li4"></span></li>

         </ul>

     </div>

     <div style="clear:both;"></div>

 </body>

 </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. 使用F#开发量化模型都缺什么？

    量化模型多数是基于统计的,因此,统计运算库应该是必备的.在Matlab.R中包含了大量的统计和概率运算,可以说拿来就用,非常方便,相比之下,F#的资源就很少了,这里给大家提供几个链接,可以解决一部分问 ...

  2. Asp.net - The type or namespace name 'App_Code' does not exist in the namespace 'xxx' (are you missing an assembly reference?)

    我在 项目 下面创建一个 App_Code的文件夹,然后在其下创建自定义的类,但是当我在该项目下别的地方使用时报错: The type or namespace name 'App_Code' doe ...

  3. 【vc】5_文本编程

    1.插入符(Caret): (1) 文本插入符 函数的原型声明:(CWnd类) void CreateSolidCaret ( int Nwidth, int nHeight ); ·nwidth:指 ...

  4. mysql 5.6 参数详解

    系统变量提供的是各种与服务器配置和功能有关的信息.大部分的系统变量都可以在服务器启动时进行设置.在运行时,每一个系统变量都拥有一个全局值或会话值,或者同时拥有这两个值.许多系统变量都是动态的,也就是说 ...

  5. 详细解析 RxAndroid 的使用方式

    RxAndroid是RxJava的扩展, 优雅地处理异步请求. RxAndroid配合Lambda表达式, 精简处理回调, 使程序更具有可读性. Rx作为Android最优秀的开源库之一, 极大地提高 ...

  6. ECSTORE验证码优化

    用ecstore的朋友应该知道,ecstore的验证码超级鸡肋. 特别是字母和数字混合,根本就看不懂写的是什么? 数字还好,但是字母就别提了.而且还小. 索性就把验证码换掉.研究一下发现,ecstor ...

  7. App轮播图

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 文成小盆友python-num5 -装饰器回顾，模块，字符串格式化

    一.装饰器回顾与补充 单层装饰器: 如上篇文章所讲单层装饰器指一个函数用一个装饰器来装饰,即在函数执行前或者执行后用于添加相应的操作(如判断某个条件是否满足). 具体请见如下: 单层装饰器 双层装饰器 ...

  9. Proguard中optimize设置不当引发SimException

    今天来说一下Proguard中关于optimize的问题.先上一张异常图片 最近项目重构,重新调整了各个组件之间的依赖关系.过程中,在项目Proguard这块卡住了,最开始还好,Proguard只是提 ...

  10. 关于炒股软件——金魔方炒股软件的Dll外挂开发

    2015-01-19 14:40:04 金魔方平台是由飞狐交易师原创团队集多年研发经验,依靠和讯财经网强大资源,吸取国际专家思路而推出的十年巨作.目前新出的这个2.0版,这一版在数据存储方面作很大的改 ...