获取窗口属性，获取dom尺寸，脚本化CSS--自用

查看滚动条的距离

• window.pageXOffset/pageYOffset
  • IE8及IE8以下不兼容
• document.body/documentElement.scrolleftscrollTop
  • 兼容性比较混乱，用时取两个值相加，因为不可能
  • 存在两个同时有值
• 封装兼容性方法，求滚动轮滚动离getScrollOffset()

/*
return x:滚动条滚动的x轴距离
return  y:滚动条滚动的y轴距离
*/
function getScrollOffset() {
            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
                }
            }
        }

查看视口的尺寸

• window.innerWidth/innerHeight
  • IE8及IE8以下不兼容
• document.documentElement.clientWidth/clientHeight
  • 标准模式下，任意浏览器都兼容
• document.body.clientWidth/clientHeight
  • 适用于怪异模式下的浏览器
• 封装兼容性方法，返回浏览器视口尺寸getViewportOffset()

function getViewportOffset() {
            if (window.innerWidth) {
                return {
                    w: window.innerWidth,
                    h: window.innerHeight
                }
            }
            else {
                if (document.compatMode === "BackCompat") {
                    return {
                        w: document.body.clientWidth,
                        h: document.body.clientHeight
                    }
                }
                else {
                    return {
                        w: document.documentElement.clientWidth,
                        h: document.documentElement.clientHeight
                    }
                }
            }
        }

查看元素的几何尺寸

• domEle.getBoundingClientRect();（一般不用，我们一般使用下面将到的方法）
• 兼容性很好
• 该方法返回一个对象， 对象里面有left,top,right,bottom等属性。left和top代表该元素左上角的X和Y坐标，right和bottom代表元素右下角的X和Y坐标
• height和width属性老版本IE并未实现
• 返回的结果并不是“实时的" （静态的，通过js改变之后并不会改变）
  
• 查看元素的尺寸
  • dom.offsetWidth, dom.offsetHeight (看起来的尺寸，包含padding)
• 查看元素的位置
  • dom.oftsetLeft ,dom.offsetTop
  • 相对于body时：默认有一个margin ：8 px；
• 对于无定位父级的元素，返回相对文档的坐标。对于有定位父级的元素，返回相对于最近的有定位的父级的坐标。
• dom.offsetParent
• 返回最近的有定位的父级，如无，返回body, bodyoffsetParent返回null
• eg:求元素相对于文档的坐标getElementPosition

//计算元素位置
function getElementPosition(e){
    var x = 0, y = 0;
    while(e != null){
        x += e.offsetLeft;
        y += e.offsetTop;
        e = e.offsetParent;
    }

    return {x: x, y: y };
}

• 让滚动条滚动
  • window上有三个方法
  • scoll(),scrollTo() scrollBy0;
  • 三个方法功能类似，用法都是将x,y坐标传入。即实现让滚动轮滚动到当前位置。
  • 区别: scrollBy)会在之前的数据基础之.上做累加。
  • eg: 利用ScrollBy)快速阅读的功能
    利用ScrollBy)快速阅读的功能

读写元素css属性

• dom.style.prop
  • 可读写行间样式(没有写在行间的样式没有办法读取到的)，没有兼容性问题，碰到float这样的保留字属性，前面应加css
  • eg：float - >cssFloat
  • 复合属性必须拆解，组合单词变成小驼峰式写法
  • 写入的值必须是字符串格式
    

 div.style.backgroundColor = "red"; //展示的行间的样式，行间如果没有就没有
        div.style.width = "100px";
        div.style.height = "100px";

 window.getComputedStyle(div,null).backgroundColor; //获取的是经过计算的样式值 //第二个参数时用来解决伪元素的问题

查询计算样式

• window.getComputedStyle(ele,nul); .(第二个参数用来获取伪元素的样式表window.getComputedStyle(ele,"after").width)
• 计算样式只读
• 返回的计算样式的值都是绝对值，没有相对单位
• IE8及IE8以下不兼容
  • 查询样式（IE的方法）
  • ele.currentStyle
  • 计算样式只读
  • 返回的计算样式的值不是经过转换的绝对值
  • IE独有的属性
• 封装兼容性方法getStyle(elem,prop);

//得到计元素css属性
 function getStyle(elem,prop){
            if(window.getComputedStyle){
                return window.getComputedStyle(elem,null)[prop];
            }
            else{
                return elem.currentStyle[prop];
            }
        }

如何改变伪元素的样式
1. 写出多个css
2. 通过改变父元素的class来改变