DOM学习笔记（二）

盒子模型

盒子模型属性

在JS中通过相关属性可以获取（设置）元素的样式 信息，这些属性就是盒子模型属性（基本上都是有关样式的）

client

• clientTop/ clientLeft：
  获取当前元素上 / 左边框的宽度
• clientWidth/ clientHeight：
  获取当前元素可视区域的宽高（包括padding），和内容溢出无关，就是我们自己设置的宽高+padding
  获取当前页面一屏（可视区域）的宽高

 document.documentElement.clientWidth || document.body.clientWidth 
 document.documentElement.clientHeight || document.body.clientHeight 

offset

• offsetTop / offsetLeft：
  获取当前盒子距离父级参照物的偏移量（上偏移，左偏移）当前盒子的外边框~父级参照物的内边框
• offsetWidth / offsetHeight：
  在client基础上+border
• offsetParent
  当前盒子的父级参照物

参照物：同一个平面，元素的父级参照物和结构没有必然联系，默认他们的伏击参照物都是Body（当前平面最外层参照物），body的父级参照物是NULL。
参照物可以改变：构建出不同平面即可（使用z-index，但是这个属性只对定位有作用），所以改变元素的定位（opsition：relative/absolute/fixed）可以改变元素的父级参照物

scroll

• scrollTop / scrollLeft:
  滚动条卷去的高度或宽度

• scrollWidth / scrollHeight：
  真实内容的宽高（不一定是自己设定的宽高，因为可能存在内容溢出，有内容溢出的情况下，需要把溢出的内容也算上）+padding，而且是一个约等于的值
  获取当前页面的真实宽高（包括溢出部分）

 document.documentElement.scrollWidth || document.body.scrollWidth 
 document.documentElement.scrollHeight || document.body.scrollHeight 

浏览器纵向最小卷去值：0
浏览器纵向最大卷去值：

document.documentElement.scrollHeight - document.documentElement.clientHeight

在JS13个盒子模型属性中，只有scrollTop / scrollLeft是“可读写”属性，其他都是可读属性

通过JS和模型获取属性值的特点

1. 获取的值都是数字，不带单位
2. 获取的都是整数，不会出现小数，(一般都四舍五入)，尤其是获取的偏移量
3. 获取的值都是复合样式值（好几个元素的样式组合在一起的值），如果想要获取单一样式值（例如：之获取padding），我们的盒子模型属性就操作不了

获取元素的某个具体样式值

1. [xxx].style.width 操作获取
   只能获取元素行内样式（不写在行内上，就获取不到）
2. 获取当前元素所有经过浏览器计算的样式
   经过计算的样式：只要当前元素可以在页面中呈现（或者浏览器渲染它了），那么它的样式都是被计算过的
   • 标准浏览器（IE9+）
     window.getComputedStyle([元素]，[伪类，一般都写null])，获取当前元素所有被浏览器计算过的样式（对象）
   • IE6~8
     [元素].currentStyle获取经过计算的样式