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. mysql varchar类型转换int类型

    select * from gyzd_yysinfo order by cast(yysid as SIGNED INTEGER) 或者 select * from gyzd_yysinfo orde ...

  2. 改bug的乐趣

    一直以来,我都不喜欢改bug,不管是自己的,还是别人的.因为我不相信自己的代码会出现问题,一旦出现问题我就会觉得很难堪,因为我觉得我的代码没什么问题.然后我就不知道该怎么来解决这些问题. 最近这一两次 ...

  3. beego 自定义模板函数

    beego支持的模板函数不是很多,有时候前端展现数据的时候,要对数据进行格式化,所以要用到自定义模板函数 比如我的前端模板上有时间和模板大小这2个数据,原始数据都是int的时间戳和byte单位的数据, ...

  4. vmware Selinux配置错误，导致无法启动虚拟机

    Linux 开机提示kernel panic - not syncing: Attempted to kill init! 解决方法: 系统启动的时候,按下‘e’键进入grub编辑界面,编辑grub菜 ...

  5. 洛谷 P2899 [USACO08JAN]手机网络Cell Phone Network

    题目描述 Farmer John has decided to give each of his cows a cell phone in hopes to encourage their socia ...

  6. Java 程序员最喜欢的 11 款免费 IDE 编辑器

    Java开发人员需要花费大量的时间埋头于Java代码中,使用各种不同的IDE(Intergrated Development Environment)来开发Java代码,所以下面我将为大家介绍11个不 ...

  7. [原创]SOUI GDI+渲染引擎下的字体特效，抛砖引玉

    由于SOUI是一种双渲染引擎的DUI库,默认在SKIA渲染引擎下是支持特效字体的,具体请参考DEMO中的源码. 但是使用GDI+渲染时是没有这些特效的,着实比较苦恼,此代抛砖引玉,细节实现 请自己再去 ...

  8. 我的ubuntu14.04配置

    完全卸载java(移除所有 Java相关包 (Sun, Oracle, OpenJDK, IcedTea plugins, GIJ)) 转载修改, 原文见:http://blog.csdn.net/s ...

  9. Spring框架总结（十二）

    问题引入:      程序的“事务控制”, 可以用aop实现! 即只需要写一次,运行时候动态植入到业务方法上. 一个业务的成功: 调用的service是执行成功的,意味着service中调用的所有的d ...

  10. 使用VM克隆CentOS后，更改网络配置

    在使用VM克隆之后,遇到一件非常郁闷的事,就算我使用‘setup’命令,修改了我的网络配置,依然无法查询到我配置的网卡,也无法开启网卡. 经过百度等一系列手段,总结如下套路--PS:朋友称之为“破釜沉 ...