Dom盒子模型-JS

Dom盒子模型13个属性

• clientWidth/clientHeight：当前元素可视区的宽高（不带边框）

//=>获取当前页面一屏幕(可视区域)的宽度和高度
 document.documentElement.clientWidth || document.body.clientWidth
 document.documentElement.clientHeight ||document.body.clientHeight

• clientTop/clientLeft：获取(上/左)边框的宽度

---

• offsetWidth / offsetHeight：当前元素可视区的宽高（带边框）
• offsetParent：当前盒子的父级参照物
• offsetTop/offsetLeft:获取当前盒子外边框开始距离其父级参照物内边框的偏移量

---

• scrollWidth/scrollHeight：真实内容的宽高（不一定是自己设定的值，因为可能会存在内容溢出，有内容溢出的情况下，需要把溢出的内容也算上）+ 左/上PADDING，而且是一个约等于的值 （没有内容溢出和client一样）

//=>获取当前页面的真实宽高（包含溢出的部分）
 document.documentElement.scrollWidth || document.body.scrollWidth
 document.documentElement.scrollHeight ||document.body.scrollHeight

• scrollTop/scrollLeft:滚动条偏移量(在js盒子模型13个属性中，只有这个是可读写属性，其余都是只读属性)

获取当前元素所有经过浏览器计算的样式

• 标准浏览器(IE9+):window.getComputedStyle([元素],[伪类,一般都写null]) 获取到当前元素所有被浏览器计算过的样式(对象)
• IE6~8:[元素].currentStyle 获取经过计算的样式