offsetWidth、clientWidth、scrollWidth区别

MaNqo

于 2021-05-13 22:56:11 发布

阅读量159

点赞数 2

文章标签： css html javascript

本文链接：https://blog.csdn.net/MaNqo/article/details/116769136

版权

对offset、client、scroll这几个有关高度的值不是很熟悉，所以写了这篇博客~

$### [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bI5bNnhw-1620917488668)(D:\front-end\markdown\前端\img\scroll系列属性.png)]$

scroll系列的相关属性可以动态地得到该元素的大小，滚动距离等(真实内容高度)

元素被卷去的头部，用element.scrollTop；页面被卷去的头部，可以通过windows.pageYOffset获得
offset

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-scwASJEQ-1620917488670)(D:\front-end\markdown\前端\img\offset.png)]$

scroll

在这里插入图片描述

client

在这里插入图片描述

mouseover鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter只会经过自身盒子触发

即mouseenter不会冒泡，它搭配的mouseleave也不会冒泡

核心原理：通过定时器setInterval()不断移动盒子位置。

var timer = setTimeout(function(){
    console.log(1);
},2000)
clearTimeOut(timer);

防止轮播图按钮连续点击造成播放过快

目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发

核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数

开始设置一个变量var flag = true;

if(flag){flag = false; do sth} 关闭水龙头

利用回调函数，动画执行完毕，flag=true 打开水龙头

关注