js获取窗口属性，获取dom尺寸，获取CSSStyle获取滚动条的滚动距离、获取可视区窗口尺寸、查看元素位置、让滚动条滚

获取滚动条的滚动距离

window.pageXOffset/pageYOffset(IE8及IE8以下不兼容)

另外的方法document.body.scrollLeft/Top document.documentElement.scrollLeft/Top 这两个方法在IE8及以下的浏览器中兼容性很混乱，有的浏览器前者可以用，有的后者可以用，且这两个方法是冲突的，在一个浏览器中，如果一种方法有值那另一种就没有。所以使用时可取两个值相加。

//封装获取滚动条距离的兼容方法
function getScrollOffset() {
    if(window.pageXOffset){
        return{
            x: window.pageXOffset,
            y: window.pageYOffset
        }
    }else{
        return{
            x: document.body.scrollLeft + document.documentElement.scrollLeft,
            x: document.body.scrollTop + document.documentElement.scrollTop
        }
    }
}

获取可视区窗口尺寸

window.innerWidth/innerHeight(IE8及IE8以下不兼容)

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

适用于怪异模式下的浏览器 document.body.clientWidth/clientHeight 【怪异模式也叫混杂模式，启动怪异模式可以向后兼容之前的语法，删除html文件第一行<!DOCTYPE html>就可以启动怪异模式】

document.compatMode           //CSS1Compat   标准模式
                              //BackCompat   怪异模式

//封装获取视口尺寸兼容性方法
function getViewportOffset() {
    if(window.innerWidth){
        return{
            w: window.innerWidth,
            h: window.innerHeight
        }
    }else{
        if(document.compatMode === "BackCompat"){
            return{
                w: document.documentElement.clientWidth,
                h: document.documentElement.clientHeigth
            }
        }else{
            return{
                w: document.body.clientWidth,
                h: document.body.clientHeight
            }
        }
    }
}

查看元素的尺寸

dom.getBoundingClientRect();【求的是视觉上的尺寸，比如加上padding后，求的值会带上padding的尺寸，而不只是内容区的宽高。（不会加margin）】

var div = document.getElementsByTagName('div')[0];
div.getBoundingClientRect();          //该方法返回一个对象，对象里面有left,top,
                                      //right,bottom等属性。height和width属性老版本IE没有

返回的结果不是实时的（所以此方法并不怎么用）【后面如果通过js改变宽高之类的属性，此方法求出的值不会变】

dom.offsetWidth dom.offsetHeight【同 getBoundingClientRect();】

查看元素位置

dom.offsetLeft dom.offsetTop【对于无定位父级的元素，返回相对文档的坐标。对于有定位父级的元素，返回相对于最近的有定位的父级的坐标。】

dom.offsetParent【返回最近的有定位的元素，没有返回body。body.offsetParent返回null】

让滚动条滚动

window.scroll(x,y) window.scrollTo()【两个参数，第一个是让 x 轴滚动距离，第二个是让 y 轴滚动距离。会让滚动条滚动到指定位置，而不是在当前位置继续滚动指定距离。】这两个方法是一样使用的。

window.scrollBy()【此方法会在之前的基础上做累加】

根据这个可以做一个简单的自动阅读功能

部分代码

<script>
var start = document.getElementsByTagName('div')[0];    //开始自动阅读按钮
var stop = document.getElementsByTagName('div')[1];     //停止
var timer = 0;              //定时器
var key = true;             //加锁，防止重复点击使定时器累加，自动阅读速度失控
start.onclick = function() {
    if(key) {
        timer = setInterval(function() {
            window.scrollBy(0,10);
        },100);
        key = false;
    }
}
stop.onclick = function() {
    clearInterval(timer);
    key = true;
}
</script>

读写元素CSS属性

`dom.style.prop`

可读写行间样式，如果是保留字属性(如float)，前面加css
复合属性要拆解，变成小驼峰式写法
写入的值式字符串格式

查询样式

window.getComputedStyle(ele,null)[prop]; 计算样式只读，返回的都是绝对值,没有相对单位。【计算样式就是最后应用的样式，那个权重高就是那个】
ele.currentStyle[prop]; 只读，IE特有属性

//封装兼容性方法getStyle(elem,prop)
function getStyle(elem, prop) {
    if(window.getComputedStyle) {
        return window.getComputedStyle(elem, null)[prop];
    }else{
        return elem.currentStyle[prop];
    }
}

【获取伪元素的样式】 window.getComputedStyle(ele,"after")[prop];