offset类属性与style类属性的区别

在JavaScript DOM操作中，有两个属性可以获取元素的width属性，但是两者也有很大的不同

• style类属性

  1. 必须要是行内元素才能获取到，当元素的宽高写在CSS中时，无法获取
  2. 获取到的是String，带px
  3. 可读写
  4. 若没有设置left，style.left返回空字符串 “ “

• offset类属性

  1. 获取元素的实际存在的宽高，不管是在行内还是页内
  2. 获取到的是Number
  3. 只可读

offsetWidth(Height)与style.width(height)

• style中的width与height
  不包含边框及内边距

• offsetWidth与offsetHeight
  获得的数值是元素的宽度+内边距+边框相加

---

offsetLeft(Top)与style.left(top)

• style中的left与top
  获取的是相对于父对象（具有定位属性 position:relative）的左边距

• offsetLeft与Top
  获取的是相对于父对象的左边距

---

offsetParrent与parrentNode

• offsetParrent
  定位定到具有定位属性父元素的

• parrentNode
  直接定到直系父元素