JavaScript笔记：DOM基本操作(二)

查看滚动条的滚动距离

• window.pageXOffset/pageYOffset （IE8及IE8以下不兼容）
• doucument.body/documentElement.scrollLeft/scrollTop 兼容性比较混乱，用时取两个值相加，因为不可能存在两个同时有值

查看可视区域窗口尺寸

• window.innerWidth/innerHeight （IE8及IE8以下不兼容）
• document.documentElement.clientWidth/clientHeight 标准模式下，任意浏览器都兼容
• document.body.clientWidth/clientHeight

查看元素的几何尺寸

• domEle.getBoundingClientRect();任何DOM元素都有的方法
• 兼容性很好
• 该方法返回一个对象，对象里面有left，top，right，bottom等属性。left和top代表该元素左上角的X和Y坐标，right和bottom代表元素右下角的X和Y坐标
• height和width属性老版本IE并未实现
• 返回的结果不是“实时的”

查看元素的尺寸

dom.offsetWidth，dom.offsetHeight

查看元素的位置

• dom.offsetLeft，dom.offsetTop
• 对于无定位父级的元素，返回相对文档的坐标。对于有定位父级的元素，返回相对于最近的有定位的父级的坐标。
• dom.offsetParent
• 返回最近的有定位的父级，如无，返回body，body.offsetParent返回null

让滚动条滚动

• window上有三个方法scroll(),scrollTo()和scrollBy()
• 三个方法功能类似，用法都是将x，y坐标传入。即实现让滚动轮滚动到当前位置。
• 区别：scrollBy()会在之前的数据基础之上做累加

读写元素css属性

dom.style.prop

• 可读写行间样式，没有兼容性问题，碰到float这样的保留字属性，前面应加css，比如cssFloat
• 复合属性必须拆解，组合单词变成小驼峰式写法
• 写入的值必须是字符串格式

查询计算样式

• window.getComputedStyle(ele,null); null可以传入伪元素
• 计算样式只读
• 返回的计算样式的值都是绝对值，没有相对单位
• IE8及IE8以下不兼容

IE8以下ele.currentStyle

• 计算样式只读
• 返回的计算样式的值不是经过转换的绝对值
• IE独有的属性