BOM三大系列--offset

2 BOM三大系列 （掌握）

2.2 offset系列

• 元素占位宽高

  • 元素.offsetWidth: 元素占位宽 content+padding+border
  • 元素.offsetHeight: 元素占位高 content+padding+border

• 元素位置

  • 元素.offsetTop
  • 元素.offsetLeft

  /* 
  offset系列(元素的占位宽高)
     标签.offsetWidth：元素的占位宽  content+padding+border
     标签.offsetHeight：元素的占位高
  
     标签.offsetTop: 获取元素的顶部到定位父元素的位置，如果没有定位父元素获取到body的位置
     标签.offsetLeft: 获取元素的左边到定位父元素的位置，如果没有定位父元素获取到body的位置
    一般用于获取当前元素在页面中的位置
  */
  var oDiv = document.getElementsByTagName("div")[0];
  var oP = document.getElementsByTagName("p")[0];
  
  //元素的占位宽  content+padding+border
  console.log(oDiv.offsetWidth); //240
  console.log(oDiv.offsetHeight); //240
  
  //标签.offsetTop: 获取元素的顶部到定位父元素的位置，如果没有定位父元素获取到body的位置
  console.log(oP.offsetTop); //0