BOM基本操作、脚本化css

BOM 基本操作

1. 查看滚动条的滚动距离
   (1) window.pageXOffset/pageYOffset
   (2) document.body/documentElement.scrollLeft/scrollTop
   (3) 封装兼容性方法，求滚动轮滚动距离getScrollOffset()

2. 查看视口的尺寸
   (1) window.innerWidth/innerHeight
   (2) document.documentElement.clientWidth/clientHeight
   (3) document.body.clientWidth/clientHeight
   (4) 封装兼容性方法，返回浏览器视口尺寸getViewportOffset()

3. 查看元素的几何尺寸
   domEle.getBoundingClientRect()
   (1) 兼容性很好
   (2) 该方法返回一个对象，对象里面有left，top。right，bottom等属性。left和top代表该元素左上角的X和Y坐标，right和bottom代表元素右下角的X和Y坐标
   (3) 返回的结果不是实时的

4. 查看元素的尺寸
   dom.offsetWidth, dom.offsetHeiht

5. 查看元素的位置
   (1) dom.offsetLeft, dom.offsetTop
   // 对于无定位父级的元素，返回相对文档的坐标。对于有定位父级的元素，返回相对与最近的有定位的父级的坐标
   (2) dom.offsetParent
   // 返回最近的有定位的父级，如无，返回body，body.offsetParent返回null
   e.g. 求元素相对于文档的坐标getElementPosition

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

脚本化CSS

1. 读写元素css属性
   dom.style.prop
   (1) 可读写行间样式，没有兼容性问题，碰到float这样的保留字属性，前面应加css
   (2) e.g. float -> cssFloat
   (3) 复合属性必须拆解，组head那次变成小驼峰式写法
   (4) 写入的值必须是字符串格式

2. 查询计算样式
   window.getComputedStyle(ele, null)
   (1) 计算样式只读，读的是最终显示的样式
   (2) 返回的计算样式的值都是绝对值，没有相对单位
   (3) 第二个参数用于取伪元素

3. 封装兼容性方法getStyle(elem, prop)