js 三大家族之offset

Posted 2021-11-22 wanguofeng

JS中的offset家族：

一、offsetWidth与offsetHeight：

获取的是元素的实际宽高 = width + border + padding

    注意点： 
        1.可以获取行内及内嵌的宽高
        2.获取到的值是一个number类型，不带单位
        3.获取的宽高包含border和padding
        4.只能读取，不能设置

console.log ( div.offsetWidth );//width + border + padding
console.log (div.offsetHeight );//height + border + padding

　　

 

二：offsetLeft与offsetTop:

    offsetLeft:获取自己左外边框与父级元素的左内边框的距离
    offsetTop:获取自己上外边框与父级元素的上内边框的距离

　　offsetTop   和　style.top 的区别

    　　１．最大区别在于  offsetLeft  可以返回没有定位盒子的距离左侧的位置。 而 style.top 不可以  只有定位的盒子 才有 left  top right
    　　２．offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
    　　３．offsetTop 只读，而 style.top 可读写。
    　　４．如果没有给 html 元素指定过 top 样式，则 style.top 返回的是空字符串。
    　　５．最重要的区别  style.left 只能得到 行内样式     offsetLeft 随便

三：offsetParent:获取最近的定位父元素 （自己定位参照的父元素）
  注意点：
          1.如果元素自身是固定定位（fixed），则定位父级是null
          2.如果元素自身是非固定定位,并且所有的父元素都没有定位，那么他的定位父级是body
          3.body的定位父级是null

offsetParent 和 parentNode的区别：
          如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。
          如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。