offsetWidth与clientWidth的区别
目录
1.offset（元素偏移量）
2.client（元素可视区）
3.scroll （元素滚动）
1.offset（元素偏移量）
- offsetTop与offsetLeft是元素本身相对于父元素的偏移量，如果没有父元素，则以body为父元素进行偏移
- offsetWidth与offsetHeight是元素自身的宽高，包括border和padding，是只读属性，不能修改
- style属性也能获取元素的宽高，但是style只能获取行内样式，而offsetWidth与offsetHeight没有限制，style获取到的是带单位的字符串，而它俩是数字类型，还有就是style获取到的是不包含border和padding的宽高。如果只是获取元素宽高，就用offsetWidth与offsetHeight，因为它俩是只读的，要修改就用style。
2.client（元素可视区）
- clientTop与clientLeft是元素的上边框和左边框大小
- clientWidth和clientHeight是元素可见区域的padding和content，不包括border，滚动条，overflow折叠起来的部分
3.scroll （元素滚动）
- scrollWidth和scrollHeight：不包括border和滚动条的宽高，包括content，padding，和overflow隐藏的的区域
- scrollWidth：content的宽 + padding的宽（把滚动条的宽度要从容器宽减去，隐藏部分的宽度也算在里面）
- scrollHeight：content的宽 + padding的宽（把滚动条的高度度要从容器高减去，隐藏部分的高度也算在里面）
- scrollTop：滚动条滚动后，可见区域最顶端到容器最顶端的距离（包括padding，不包括border）
- scrollLeft：滚动条滚动后，可见区域最左端到容器最左端的距离
4.判断滚动条滚动到底了的bug
在了解了前面的知识后，可以发现当scrollTop + clientHeight == scrollHeight时，恰好是滚动条滚动到底部了。但是实际情况下，只有1920x1080分辨率的情况下才可以，当改变浏览器的缩放比例时（或者电脑屏幕本身就不是1920x1080分辨率），scrollTop会是小数（且比标准下小一点），所以就会造成它们不相等，从而判断不出滚动条是否到底了。
解决办法：
scrollTop + clientHeight + 1 >= scrollHeight
offsetWidth与clientWidth的区别相关推荐
- js获取屏幕尺寸、clientWidth、offsetWidth、scrollWidth等区别
js获取元素/屏幕宽高 总结如下 1.获取网页可视区域宽高(随着页面的缩放,所获取的值会相应改变) 方法一.不包括滚动条的宽高在内 document.documentElement.clientWid ...
- offsetwidth/clientwidth的区别
offsetwidth/clientwidth的区别 clientWidth是对象看到的宽度(不含边线,即border) scrollWidth是对象实际内容的宽度(若无padding,那就是边框之间 ...
- offsetWidth、clientWidth、scrollWidth三者的区别
client可视区 client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息.通过client系列的相关属性可以动态的得到该元素的边框大小.元素大小等. offse ...
- 再谈 document.documentElement 与 document.body 的 scrollWidth、offsetWidth、clientWidth
(scrollHeight.offsetHeight.clientHeight 同样可按本文去理解.) 这是一个很复杂的问题,让我们想像一下: document.documentElement.scr ...
- js利用offsetWidth和clientWidth来计算滚动条的宽度
大家好,清明节即将来来临,清明时节雨纷纷,路上行人欲断魂,借问酒家何处有,牧童遥指杏花村!!哈哈哈哈!言归正传,今天我主要介绍一个计算滚动条宽度的例子. 前言 其实,很多情况下滚动条宽度是不用计算的, ...
- javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
关于js中的offsetWidth.clientWidth.scrollWidth等一系列属性及其方法一直都傻傻分不清,这里就来总结一下这些方法的用法和含义. 注意: 下面元素属性和元素方法都通过 e ...
- offsetWidth和width的区别 逻辑中断 delete运算符 。。。。
offsetWidth和width的区别: 1.offsetWidth属性可以返回对象的padding+border+widt属性值之和,style.width返回值就是定义的对象的width属性值. ...
- offsetWidth、clientWidth、scrollWidth如何计算
offsetWidth.clientWidth.scrollWidth如何计算 先贴一下测试用html,很简单 <!DOCTYPE html> <html lang="en ...
- screenWidth、clientWidth、offsetWidth、 scrollWidth的区别
在做移动端开发的时候,我们会需要用到屏幕的宽度,根据不同屏幕的宽度写交互代码. 有那么多种宽度,我们应该用哪个呢?它们有什么区别呢? document.body.clientWidth:可见区域宽. ...
最新文章
- Intellij IDEA中开启Run Dashboard模式
- Visual Studio 2019更新到16.2.3
- 【设计模式】代理模式 ( 动态代理 )
- java 中通过 Lettuce 来操作 Redis
- python 白色怎么表示_python – 如何使用pil使用白色背景(透明？)的round_corner标识？...
- jquery ajax 跨域解决方案 - CORS
- 关于兔子的一些往事～
- flutter TextField 限制只允许输入数字 小数点
- 解决An attempt was made to load a program with an incorrect format.问题
- 计算机二级模拟系统在线,计算机二级foxbase题库系统
- Science子刊：母亲的身体气味增强了婴儿和成人的脑-脑同步
- 中国第一代程序员简介与现状
- js中的Image对象
- [WARNING] Corrupted STDOUT by directly writing to native stream in forked JVM 1
- 二维数组的花式遍历技巧盘点
- 项目质量管理全部精华看这篇就够了
- SQL语句，常用的DDL表操作语句
- 计算机三级网络技术（补充）
- HashKey2019数字资产全球峰会将于3月21日在香港召开
- 资本退潮后，CEEC国际经贸链带你穿越币圈熊市！