offset,client,scroll的不同之处

1.offsetWidth、offsetHeight、offsetLeft和offsetTop

• offset – 偏移
• 用于获取元素自身的位置和大小，在网页特效中有广泛应用
• offsetWidth和offsetHeight对象自身的的宽度/高度
• offsetWidth和offsetHeight属性的构成？
  offsetWidth = width + border + padding
  offsetHeight = height + border + padding

---

 - offsetHeight 与 style.height 的区别？
 - i.获得的值的意义不同
     - 1.offsetHeight：获取元素的真实高度
     - 2.style.height：只能获取行内样式，如果样式写到了其他地方，甚至根本就没写，便无法获 取
 - ii.获得的值的类型不同：
     - 1.offsetHeight：数值类型
     - .style.height：字符串（而且带单位）
 - iii.使用方式的不同
     - 1.offseHeight：只读属性 只能获取属性值 不能设置元素的高度
     - 2.style.height：能获取、设置行内的height属性值

offsetParent 距离当前对象最近的并有定位的父级元素，若无则返回body
- offsetLeft和offsetTop
用来获取对象的位置(注意没有right和bottom)
2.client
- client – 可视
- 用于获取元素可视区域（客户区）的大小
- clientWidth和clientHeight

clientWidth = width + padding(自身)
scrollWidth = width + padding(内容)
offsetWidth = width + padding + border

clientLeft和clientTop
他们通常就是border（如果有滚动条会包含滚动条的宽度）

---

网页可视区宽高的几种获取方式：
正常浏览器（除了IE678外的浏览器）
window.innerWidth
已经声明DTD（标准模式）
document.documentElement.clientWidth
未声明 DTD（怪异模式）
document.body.clientWidth

兼容写法：

var clientWidth = window.innerWidth                                 ||document.documentElement.clientWidth
|| document.body.clientWidth
|| 0;

---

3.scroll

• scroll – 滚动
• 用于获取元素内容的大小和位置
• scrollHeight和scrollWidth
  对象内部实际内容的高度/宽度
  scrollTop和scrollLeft
  用来获取对象被卷去部分的 顶部/左侧 到可视区域 顶部/左侧 的距离
• onscroll事件：每滚动一像素都会触发该事件
  
• 页面滚动座标的兼容写法

正常浏览器（除了IE678外的浏览器）
window.pageYOffset
已经声明DTD（标准模式）
document.documentElement.scrollTop
未声明 DTD（怪异模式）
document.body.scrollTop

兼容写法：
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;