懒咪学编程


JS中的offsetWidth/offsetHeight/offsetTop/offsetLeft、clientWidth/clientHeight/clientTop/clientLeft、scro

时间:2020-09-09 02:07:46  来源:  作者:  所属栏目:JavaScript

本文将为您描述JS中的offsetWidth/offsetHeight/offsetTop/offsetLeft、clientWidth/clientHeight/clientTop/clientLeft、scrollWidth/scrollHeight/scrollTop/scrollLeft,

本文将为您描述JS中的offsetWidth/offsetHeight/offsetTop/offsetLeft、clientWidth/clientHeight/clientTop/clientLeft、scrollWidth/scrollHeight/scrollTop/scrollLeft,教程操作方法:

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

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。

JS中的offsetWidth/offsetHeight/offsetTop/offsetLeft、clientWidth/clientHeight/clientTop/clientLeft、scrollWidth/scrollHeight/scrollTop/scrollLeft就为您介绍到这里,感谢您关注懒咪学编程c.lanmit.com.

本文地址:https://c.lanmit.com/Webqianduan/JavaScript/119788.html

 

推荐JavaScript排行......