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. linux命令详解2-文件管理，查看文件命令

    1. cat命令(tac) ----连接文件,并打印出来(顺序打印)与tac命令类似只不过,tac命令是逆序打印 [语法] cat [OPTION]... [FILE]... [选项] -A:显示所有 ...

  2. 2018/4/26 python文件处理方式

    目录 2018/4/26总结 1. 如果有一天群内问题总结: 问题:python2和python3的默认编码是什么? 2. python学习总结: python的处理文件方式 2018/4/26总结 ...

  3. Linux实战教学笔记36：PHP服务缓存加速深度优化实践

    一,PHP缓存加速器介绍与环境准备 1.1 PHP缓存加速器介绍 1.1.1 操作码介绍及缓存原理 当客户端请求一个PHP程序时,服务器的PHP引擎会解析该PHP程序,并将其编译为特定的操作码(Ope ...

  4. python's metaclass

    [python's metaclass] 和objc中类似,metaclass用于创建一个类对象,但与objc不同的是,objc中每个类对象有各自不同的metaclass,而python中的metac ...

  5. svn服务，svnserve开机启动

    在服务器(我的环境是centos6.5)上部署完svn之后,一般都希望每次重启的时候svn服务能够随着启动.上网搜索了一下,一般有两种做法: 一.启动脚本+/etc/rc.local启动 1. 在某个 ...

  6. 一张图5分钟熟悉MarkDown的基本语法

    看到zealer上面有介绍MarkDown的,以前在老罗的发布会也听说过,说锤子便签支持MarkDown,但是不知道有什么用,现在来看看,确实不错. MarkDown的好处是让你可以专注于写字本身,而 ...

  7. 关于super关键字

    1.在Java中,有时会遇到子类中的成员变量或方法与父类中的成员变量或方法同名.此时父类的成员变量或方法就会被隐藏(可以理解为重写),如果还想要使用父类中的这个成员变量或方法,就需要用到super. ...

  8. Greeplum 系列（二） 安装部署

    Greeplum 系列(二) 安装部署 本章将介绍如何快速安装部署 Greenplum,以及 Greenplum 的一些常用命令及工具.本章不会涉及硬件选型.操作系统参数讲解.机器性能测试等高级内容, ...

  9. gitlab centos 安装配置运维笔记

    写在前面 如果你需要一个git服务器,为企业或自己的团队托管代码而又不希望将代码仓库存储到第三方.你可以在自己的服务器上搭建一个gitlab. 本文为我在最初安装配置gitlab服务器的时候留存的笔记 ...

  10. java重载方法的二义性

    http://blog.csdn.net/lavor_zl/article/details/40746813