JavaScript中的offsetWidth,offsetHeight,offsetLeft,offsetTop

1. 获取宽高left,top值的简便方法

1. 获取宽度

   元素对象.offsetWidth 获取到的值会包括边框,padding值,自身宽度

2. 获取高度

   元素对象.offsetHeight 获取到的值会包括自身高度,边框 ,padding值

3. 获取父元素

   元素对象.offsetParent

  获取到的是它的参考父元素  而`parentElement`获取到的是他的直接父元素

1. 获取left right top bottom

   以left为例

   元素对象.left

   • 这个值指的是到参考父元素的左边的的距离

   • 没有定位时可能是自己的margin与父元素的padding引起的,

   • 定位之后可能是自己的margin值引起的,也可能是left值引起的,但是参考父元素的padding值不会影响

另: 元素对象.getBoundingClientRect()

这个方法获取的是个对象,里面有8个值

width height top left right bottom x y

width和height值和 offsetWidth,offsetHeight的值是一样的,

left,right,top,bottom的值永远视窗的左上角,可以说是body 距离元素的值

说明:最外边的黑色边缘是body的边框