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没有限制

巴特西