图解clientWidth,offsetWidth,scrollWidth,scrollTop
新手看到这几个属性,很头疼,参考了网上一些文章,加上自己实践,给出对这几个属性的解释
我把代码贴上来,方便大家验证
在chrome浏览器中,不知为什么图片容器高度比图片高度多了4px,把图片设置为block或者是容器的fontSize设置为0可解决这个问题。
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.div1 {position: absolute;top: 180px;left: 180px;width: 500px;height: 500px;background: #E91616;overflow: auto;z-index: 10;border: 20px solid green}.img1 {position: absolute;top: 200px;left: 200px;opacity: 0.5;}</style> </head><body><div class="div1"><!-- 容器比图片多4px --><!-- 设置img为块级元素 --><!-- 或者是设置容器元素的fontSize为0 --><img style="display: block" src="../common/baiduPicture/8.jpg" alt=""></div><img class="img1" src="../common/baiduPicture/8.jpg" alt=""> </body></html>
图片是这个
页面效果,我放了两张图片,下面半透明的那张是完整显示,方便和框中的不完整的做对比。
水平方向上
1是clientWidth,2是offsetWidth,3是scrollWidth
不能我说是就是,要想办法验证一下
验证clientWidth
从图上看,clientWidth + 滚动条的宽度 应该恰好等于div1的contentBox的宽度
而滚动条宽度可以用(注意要先清除body的margin)
window.innerWidth - document.body.clientWidth
来获取,我的结果是,滚动条宽度为17px
获取div1的clientWidth,483
获取divcontentBox的width,500(我在chrome下审查元素,显示的是483px,有偏差,在firefox下就显示的是500)
正好相等
验证offsetWidth
从图上看,offsetWith应该等于 clientWidth + 滚动条宽度 + 两边border宽度
获取offsetWith,540
样式中border是20
540 = 483 + 17 + 40,相等
验证scrollWidth
从图上看,scrollWidth应该等于图片宽度
获取scrollWidth,709
图片宽度也是709
两者相等
大家可以自己验证一下
垂直方向上
4是clientHeight,5是offsetHeight,6是scrollHeight
验证方法和上面一样。
scrollTop
我们在向下滚动 滚动条的时候,可以看成是里面内容在向上移动,而scrollTop就是图片向上移动的距离。
按照这个说法,当滚动条在从最上面滚动到最下面的时候(如下图所示),图片的底线就是半透明图片的底线的位置,移动到,div1水平滚动条顶线的位置
所以,应该有
图片向上偏移的距离(scrollTop) = 图片的高度 - div1的clientHeight
图片的高度是987
div1的clientHeight是483
div1的scrollTop是504
等式成立
完
如果错误,欢迎讨论!
转载于:https://www.cnblogs.com/maoscut/p/7637565.html
图解clientWidth,offsetWidth,scrollWidth,scrollTop相关推荐
- 图解clientWidth,offsetWidth,scrollWidth
关于clientWidth,offsetWidth,scrollWidth的文章很多,但我一直不太注意他们的区别,这里贴上自己尝试的图和一些文字说明帮助大家比较直观的看到他们的区别 clientWid ...
- JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义
JQuery中: 1.width()方法用于获得元素内容所占的宽度: 2.innerWidth()方法用于获得包括内边界(padding)的元素宽度: 算式:innerWidth()=width()+ ...
- clientWidth offsetWidth scrollWidth区别
clientWidth: 元素内部宽度,即可视内容区域宽度, 它包括左侧padding宽度加上可视内容宽度再加上右侧padding宽度.也即元素左边界内侧到右边界内侧的距离(再减去滚动条的宽度如果有滚 ...
- HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之全然具体解释
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth究竟指的哪到哪的距离之全然具体解释 scrollHeight: 获取对象的滚动高度. scroll ...
- scrollWidth,clientWidth,offsetWidth的区别
2019独角兽企业重金招聘Python工程师标准>>> 通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过 ...
- offsetWidth、clientWidth、scrollWidth三者的区别
client可视区 client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息.通过client系列的相关属性可以动态的得到该元素的边框大小.元素大小等. offse ...
- JS中clientWidth offsetWidth innerWidth scrollWidth等区分
由于前端经常会遇到计算位置的问题,那么搞懂clientWidth,offsetWidth,scrollHeight等等这些就变得尤为重要.放上经典图,一张图让你搞懂clientWidth,offset ...
- [绍棠] scrollWidth,clientWidth,offsetWidth的区别
说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. ...
- 详解clientWidth,scrollWidth,offsetWidth,innerWidth,outerWidth
一.基本概念 1.document.documentElement.clientWidth:可视区屏幕宽度(你能看到的页面部分,不含滚动条) 2.document.documentElement.sc ...
- offsetWidth、clientWidth、scrollWidth如何计算
offsetWidth.clientWidth.scrollWidth如何计算 先贴一下测试用html,很简单 <!DOCTYPE html> <html lang="en ...
最新文章
- asp打印html,asp.net教程之利用ASP在浏览器上打印输出
- Netron开发快速上手(一):GraphControl,Shape,Connector和Connection
- [原创]如果软件在网络磁盘中或移动磁盘中运行时需要解决 exception C0000006 异常问题
- SQL server 2005中无法新建作用(Job)的问题
- php 获取内容页图片,织梦CMS如何从列表页获取内容页的图片
- 服务器定期监控数据_机房环境监控的实践【斯必得智慧机房 】
- 【java】JVM Attach机制实现与jstack使用(jvm参数DisableAttachMechanism)
- 恢复删除了数据文件的表MyISAM
- Java并发 乐观锁和悲观锁 乐观锁的一种实现方式CAS
- wpf程序启动时停止工作,事件管理器报错kernelbase.dll
- 动态规划C语言实现之最长公共子序列(LCS)
- spring事件监听器系列一:应用
- 人工智能中,自动驾驶汽车是如何自动识别交通标志的?
- 【小5聊】CSS基础之设置小箭头图标
- 14.嵌入式控制器EC实战 SMBus读取电池信息并控制充放电
- Weight the Tree CodeForces - 1646D
- js通用判断指定日期是周几,是否是周六、周日
- 立创eda学习笔记二十六:手把手教你使用立创eda的官方教程
- 求助!PIP安装出问题
- 统计学习:现代机器学习