获取窗口属性，获取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.offsetParent

//计算元素位置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独有的属性

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

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