1.查看滚动条的滚动距离

document.body.scrollLeft与document.documentElement.scrollLeft是冲突的，一个有值另一个的值就为0，

▲兼容性比较混乱，同时取两个值相加，因为不可能存在两个同时有值

so最兼容的写法就是document.body.scrollLeft+document.documentElement.scrollLeft

window.pageXOffset/pageYOffset    IE8/IE8以下都不兼容,IE9以上才兼容

举个例子：封装兼容性方法，求滚轮滚动离aa()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     D
  7. </head>
  8. <body>
  9. <div style="width: 10000px; height: 23000px; background-color: #ddd;"></div>
  10. <script type="text/javascript">
  11.     function aa() {
  12.         //0 && window.pageXoffset代表失效,else是验证IE9以下
  13.         if (  window.pageXOffset) {
  14.             return {
  15.                 x: window.pageXOffset,
  16.                 y: window.pageYOffset
  17.             }
  18.         }
  19.         else
  20.             {
  21.                 return {
  22.                     x: document.body.scrollLeft + document.documentElement.scrollLeft,//二者只显示一个
  23.                     y: document.body.scrollTop + document.documentElement.scrollTop
  24.                 }
  25.  
  26.             }
  27.  
  28.     }
  29. </script>
  30.  
  31. </body>
  32. </html>

效果图：

2.视口尺寸

window.innerWidth/innerHeight     IE8/IE8以下都不兼容

document.documentElement.clientWidth/clientHeight    标准模式下，任何浏览器都兼容

document.body.clientWidth/clientHeight   适用于怪异模式下的浏览器(当html页面没有声明（<!DOCTYPE html>）是就是怪异模式)

举个例子：

封装兼容性方法，返回浏览器视口尺寸aa()

DOM基本操作的更多相关文章

  1. JavaScript思维导图—DOM基本操作

    JavaScript思维导图-来自@王子墨http://julying.com/blog/the-features-of-javascript-language-summary-maps/ DOM基本 ...

  2. javascript DOM基本操作

    javascript DOM基本操作 1.DOM(Document Object Model 文档对象模型) 2.节点: 文档节点:document 元素节点:html.head.body.title ...

  3. js学习总结：DOM节点二（dom基本操作）

    一.DOM继承树 DOM——Document Object Model DOM定义了表示修改文档所需要的方法.DOM对象即为宿主对象,由浏览器厂商定义,用来操作html和xml的一类厂商定义,也有人称 ...

  4. JS文件写法操作，DOM基本操作

     js文件写法.规范 // 定义全局变量 var num = 0;//这个是用来记数的. // 页面加载完成 window.onload = funtion(){ intVar();//初始化变量 s ...

  5. Web | DOM基本操作

    基本概念 文档对象模型 (DOM) 是HTML和XML文档的编程接口.它提供了对文档的结构化的表述,并定义了一种方式可以使程序对该结构进行访问,从而改变文档的结构,样式和内容.DOM 将文档解析为一个 ...

  6. html dom基本操作

    //div出滚动条: <div id="discussion" style="height:500px;overflow:auto;"></d ...

  7. javascript知识点之DOM与window对象

    在学习javascript过程中只是一知半解好多,碰到自己不知道属性方法,到最后都不知道自己学到了什么 js代码为什么这样写 为什么你知道这方法或属性可以这样用. DOM和window对象 DOM基本 ...

  8. JS之DOM（二）

    一.DOM节点的操作 1.增加: (1). document.creatElement('标签名');创建元素节点 (2). document.creatTextNode('文本内容'):创建文本节点 ...

  9. Js之DOM(一)

    ----------------------------------------------------------------------------------------------第一部分 D ...

随机推荐

  1. drbd switch off

    DRBD secondary to primary: drbdadm disconnect all drbdadm primary r0 --force mount /dev/drbd0 /mnt [ ...

  2. Binormal - 副法线

    [Binormal - 副法线] Binormal是垂直于Normal.Tangent平面的直线.Normal.Binormal.Tangent三条线构成一个坐标系. 参考:http://202.11 ...

  3. 实现SwipeRefreshLayout首次进入自动刷新

    看到了Android版知乎实现了这种效果,就自己也实现了一下. 先来一张效果图 实现方式: 方法一. ①在onWindowFocusChanged()方法中,设置为刷新状态为true @Overrid ...

  4. Java-Excel文件读取

    import java.io.File; import java.io.IOException; import org.testng.annotations.DataProvider; import ...

  5. CloudStack 4.3功能前瞻

    今天CloudStack 4.3已经Feature Freeze了,不会再有新功能加入到这个版本里.我们也可以坐下来看看哪些功能是值得期待的.首先,4.3的UI也秉承扁平化设计,看着更加简洁清爽.见下 ...

  6. 最近工作的一点小tips

    最近工作比较忙,但也积累了一些小tips,比较杂,不成系统,也并不很深入,就开一篇笼统的先记录一下,以后再深入挖掘. 1.-webkit-tap-highlight-color -webkit-tap ...

  7. easyui 获取当前页签选中的名称

    parent.parent.$("#tabs").tabs('getSelected').panel('options').title == "收藏夹管理"

  8. Ubuntu14.04下使用PPA安装php5.6，php7

    1.为了使用ppa(Personal Package Archives) 选安装依赖: # apt-get install python-software-properties 2.添加不同版本php ...

  9. jenkins持续集成之Global Tool Configuration的配置

    Global Tool Configuration的配置过程: 1.点击系统管理2.点击 Global Tool Configuration3.必须配置: jdk git ant maven 1.点击 ...

  10. 15 输入三个整数x,y,z，请把这三个数由小到大输出。

    题目:输入三个整数x,y,z,请把这三个数由小到大输出. public class _015ThreeNumberSort { public static void main(String[] arg ...