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

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

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

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

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

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    D

</head>

<body>

<div style="width: 10000px; height: 23000px; background-color: #ddd;"></div>

<script type="text/javascript">

    function aa() {

        //0 && window.pageXoffset代表失效,else是验证IE9以下

        if (  window.pageXOffset) {

            return {

                x: window.pageXOffset,

                y: window.pageYOffset

            }

        }

        else

            {

                return {

                    x: document.body.scrollLeft + document.documentElement.scrollLeft,//二者只显示一个

                    y: document.body.scrollTop + document.documentElement.scrollTop

                }

            }

    }

</script>

</body>

</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. 【uva1658 算法竞赛入门经典】海军上将【费用流】

    题意 给出一个v(3<=v<=1000)个点e(3<=e<=10000)条边的有向加权图,求1-v的两条不相交(除了起点和终点外没有公共点)的路径,使得权和最小. 分析 费用流 ...

  2. 系统性能信息模块之psutil模块

    一.psutil模块介绍 官方网址:https://pypi.org/ psutil模块安装:https://github.com/giampaolo/psutil/blob/master/INSTA ...

  3. crontab定期执行shell脚本

    [场景]: 需要定期运行Hadoop的MapReduce [解决办法]: 编写一个运行MapReduce的Shell脚本.然后使用crontab配置定时任务. [Shell脚本] #!/usr/bin ...

  4. IO引脚复用和映射

    1.端口复用 这些外设包括ADC,DAC以及串口等等. 查找STM32F429数据手册可以找到相关IO口的复用功能引脚. 注意:除ADC和DAC要配置成模拟通道外,其他的所有外设都要配置成复用功能.

  5. Oracle RMAN-06023 和ORA-19693错误

    在将一个0级备份的数据库还原到其它机器上时,首先遇到了RMAN-06023然后遇到ORA-19693错误,错误发生的环境和内容大致如下: 数据库版本: SQL> select * from v$ ...

  6. AJAX和DHTML

    DHTML: (动态的html)本身不是一门新语言,而是一门新技术,包含以下 html . css . dom . js AJAX  :  也是一门新技术包含    html . css.  dom ...

  7. C#通过Redis实现分布式锁

    Redis有三个最基本属性来保证分布式锁的有效实现: 安全性: 互斥,在任何时候,只有一个客户端能持有锁. 活跃性A:没有死锁,即使客户端在持有锁的时候崩溃,最后也会有其他客户端能获得锁,超时机制. ...

  8. ceph常用命令（转）

    原文:http://michaelkang.blog.51cto.com/1553154/1698287 一:ceph集群启动.重启.停止 1:ceph 命令的选项如下: 选项简写描述 --verbo ...

  9. java TimeZone类

    TimeZone类主要是对时区的操作 下面是一个简单的例子 public static void main(String[] args) { // TODO Auto-generated method ...

  10. 白话浅说TCP/UDP面向连接，面向无连接的区别

    TCP是面向连接的UDP是面向无连接的就是这种关系了 TCP(Transmission Control Protocol,传输控制协议) UDP(User Datagram Protocol,用户数据 ...