JS学习 - offset家族(一)

先来张图开开胃

• offsetWidth offetHeight
  • 得到对象的宽度和高度(自己的,与他人无关)
  • offsetWidth = width + border + padding
  • div {width:220px; border-left:2px solid red; padding:10px;} div.offsetWidth = 220 + 2 + 20;
• offsetLeft offsetTop
  • 返回距离上级盒子(最近的带有定位的盒子)左边的位置
  • 如果父级都没有定位则以body为准 这里的父级指的是所有的上一级,不仅仅指的是父亲级别,还可以是爷爷级别或者更高级别
  • offsetLeft从父级的padding开始算,父亲的border不算 '盒子到定位的父盒子,边框到边框的距离'
• offsetParent
  • 返回该对象的父级('带有定位的父级,这里的父级包括父亲级别或者更高级别'), 请自觉区别parentNode('返回的是父亲级别')
  • 如果当前元素的父级元素没有进行CSS定位(postion为absolute或relative),offsetParent为body
  • 如果当前元素的父级元素中有CSS定位(postion为absolute或relative),offsetParent取最近的那个父级元素

重点 - offsetWidth,offetHeight,offsetLeft,offsetTop 与 style.width,style.height,style.left,style.top 的区别

这里拿offsetTop 和 style.top作比较

• 1.最大的区别在于offsetTop可以返回没有定位的盒子距离顶部的位置,而style.top不可以,只要定位的盒子,才有left top right bottom
• 2.offsetTop返回的是数字,而style.top返回的是字符串,除了数字外还带有单位:px
• 3.offsetTop 只读,而style.top可读写
  • 如果没有给HTML元素指定过top样式,则style.top返回的是空字符串
  • style.top只能得到行内样式;offsetTop没有限制