这是一组非常容易弄混的参数!都是描述某个盒子元素的宽度、高度以及上或左的距离偏移量。 1. offsetWidth / offsetHeight(不包括外边距)offsetWidth:返回元素的宽度(content+padding+border) 2. offsetTop / offsetLeft(相对于父级的偏移量)类似于子绝父相定位中的top和left,都是相对于有定位父级的偏移距离。 下图演示的的是没有定位父级的情况:(如果外层盒子给一个定位,那么这里的offsetTop/offsetLeft都是0px) 3. clientWidth / clientHeight(不包括边框和外边距)client客户端大小:当前元素内容和内边距占据空间的大小,不包括边框。
4. clientTop / clientLeft(就是边框大小)clientTop:返回元素上边框大小 5. scrollWidth / scrollHeight(不包括边框和外边距)scrollWidth:返回元素的总宽度,包含由于溢出而无法在网页上显示的不可见部分。 6. scrollTop / scrollLeft 可读可写!scrollTop:元素被卷起的高度。
注意:style.width/style.height返回值是字符串类型的,例如返回的是'20px'。而以上这些均返回数字,例如20。 |
|