欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS中的offsetWidth/offsetHeight/offsetTop/offsetLeft、clientWidth/clientHeight/clientTop/clientLeft、scrollWidth/scrollHeight/scrollTop/scrollLeft

程序员文章站 2022-07-10 21:23:30
这是一组非常容易弄混的参数!都是描述某个盒子元素的宽度、高度以及上或左的距离偏移量。 1. offsetWidth / offsetHeight(不包括外边距) offsetWidth:返回元素的宽度(content+padding+border) offsetHeight:返回元素的高度(cont ......

这是一组非常容易弄混的参数!都是描述某个盒子元素的宽度、高度以及上或左的距离偏移量。

1. offsetwidth / offsetheight(不包括外边距)

offsetwidth:返回元素的宽度(content+padding+border)
offsetheight:返回元素的高度(content+padding+border)
JS中的offsetWidth/offsetHeight/offsetTop/offsetLeft、clientWidth/clientHeight/clientTop/clientLeft、scrollWidth/scrollHeight/scrollTop/scrollLeft

2. offsettop / offsetleft(相对于父级的偏移量)

类似于子绝父相定位中的top和left,都是相对于有定位父级的偏移距离
offsettop:返回元素上边框到有定位父级元素的上边框的距离。(如果找不到有定位的父级,那么距离就是它的上边框到body的距离。)
offsetleft:返回元素左边框到有定位父级元素的左边框的距离。(如果找不到有定位的父级,那么距离就是它的左边框到body的距离。)

下图演示的的是没有定位父级的情况:(如果外层盒子给一个定位,那么这里的offsettop/offsetleft都是0px)
JS中的offsetWidth/offsetHeight/offsetTop/offsetLeft、clientWidth/clientHeight/clientTop/clientLeft、scrollWidth/scrollHeight/scrollTop/scrollLeft

3. clientwidth / clientheight(不包括边框和外边距)

client客户端大小:当前元素内容和内边距占据空间的大小,不包括边框。
clientwidth:返回元素的宽度(content+padding)
clientheight:返回元素的高度(content+padding)
JS中的offsetWidth/offsetHeight/offsetTop/offsetLeft、clientWidth/clientHeight/clientTop/clientLeft、scrollWidth/scrollHeight/scrollTop/scrollLeft

// 获取当前页面(客户端)的宽高
console.log(document.documentelement.clientwidth);
console.log(document.documentelement.clientheight);

4. clienttop / clientleft(就是边框大小)

clienttop:返回元素上边框大小
clientleft:返回元素左边框大小

5. scrollwidth / scrollheight(不包括边框和外边距)

scrollwidth:返回元素的总宽度,包含由于溢出而无法在网页上显示的不可见部分。
scrollheight:返回元素的总高度,包含由于溢出而无法在网页上显示的不可见部分。
(如果没有溢出,那么和clientwidth/clientheight情况相同。)

6. scrolltop / scrollleft 可读可写!

scrolltop:元素被卷起的高度。
scrollleft:元素被卷起的宽度。

  • 一个方法
    scrollto() 方法可把窗口内容滚动到指定的坐标。
    scrollto(xpos,ypos)

注意:style.width/style.height返回值是字符串类型的,例如返回的是'20px'。而以上这些均返回数字,例如20。