平时写js的时候,有时候会遇到这样的情况,需要去计算元素或者屏幕的宽度,再进行不同的处理,但是宽度真的有不少,很容易搞混,特此总结下,也希望大家亲测下,这样比较有体会,记得牢固些。

  1、scrollWidth:指的是元素的内容宽度,会随着内容撑大,不包边线宽度。

  2、clientWidth:指的是元素的可视区域的宽度,不会随着内容撑大,不包边线宽度,如果不出现横向滚动条,则等于scrollWidth,如果出现,则小于scrollWidth。

  3、offectWidth:指的是元素的实际宽度,包含边线宽度,和CSS关系较大。

  由上可知:

  元素出现横向滚动条,clientWidth < offectWidth < scrollWidth

  元素不出现横向滚动条,clientWidth = scrollWidth < offectWidth

  另外提下,window.screen.width计算屏幕宽度很方便。

宽度总结-scrollWidth,clientWidth,offectWidth的更多相关文章

  1. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...

  2. scrollWidth,clientWidth,offsetWidth的区别

      通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包 ...

  3. web前端学习笔记---scrollWidth,clientWidth,offsetWidth的区别

    通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动 ...

  4. 元素间距属性(scrollLeft,scrollWidth,clientWidth,offsetWidth,padding,margin)

    scrollHeight: 获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端 ...

  5. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度. scrollLe ...

  6. 完全图解scrollLeft,scrollWidth,clientWidth,offsetWidth 获取相对途径,滚动图片(网上找的,未经试验,但觉得比较好)

    获取元素的位置属性可以通过 HTMLElement.offsetLeft HTMLElement.offsetTop 但是,这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置,而是相对于其 ...

  7. scrollLeft,scrollWidth,clientWidth,offsetWidth 可实现导航栏固定不动(冻结)的效果

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth  scrollHeight: 获取对象的滚动高度.  scrollLeft:设置或获取位 ...

  8. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之全然具体解释

      HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth究竟指的哪到哪的距离之全然具体解释scrollHeight: 获取对象的滚动高度. scrol ...

  9. HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解

    scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最 ...

随机推荐

  1. C++没有库则寸步难行,有库则几乎可以做任何事情——Bjarne Stroustrupi

    "Without a good library, most interesting tasks are hard to do in C++; but given a good library ...

  2. WD-线程KTHREAD结构(WRK)

    线程是系统处理器调度的基本单元,而且线程调度是在内核层完成的,所以,KTHREAD 的许多域都跟Windows 的线程调度机制有关. 找到进程的线程可以使用!process 1 2 3 kd> ...

  3. iOS密码框实现(二)取消确定按钮

    由于将确定按钮去掉了,所以需要重新修改下代码,当输入第四个数字时,自动进入房间.   iOS 密码框效果图:     实现方式:   首先声明一个block初始化方法,因为这只是个框框,并不需要处理网 ...

  4. 30+简约和平铺的WordPress复古主题

    现在复古风格的设计非常流行,你可以快速建立属于自己的复古风格的网站.继续阅读下去,我们将展示给你一些精彩的WordPress复古主题. 多年来,网页设计师们纷纷用3D效果,纹理,噪声,渐变的灯光效果, ...

  5. 测试链接服务器sql 语句

    sp_addlinkedsrvlogin 创建或更新本地 Microsoft® SQL Server™ 实例上的登录与链接服务器上远程登录之间的映射. 语法 sp_addlinkedsrvlogin ...

  6. ZooKeeper 系列(三)—— Zookeeper常用 Shell 命令

    一.节点增删改查         1.1 启动服务和连接服务         1.2 help命令         1.3 查看节点列表         1.4 新增节点         1.5 查看 ...

  7. vscode左边侧边栏字体的大小

    相信很多小伙伴们都会在用vscode的时候,当屏幕大小发生变化的时候,你可能会觉得左边的字体太小了,我也遇到了这样的问题,百度也没有找到解决办法,自己摸索了几天,发现可以通过ctrl+shift+ + ...

  8. 33 | 无实例无真相:基于LoadRunner实现企业级服务器端性能测试的实践(下)

  9. CentOS下安装配置MySQL8.0的步骤详解

    下载yum源的安装包 yum localinstall https://repo.mysql.com//mysql80-community-release-el7-1.noarch.rpm 安装 yu ...

  10. 【HDU - 2102】A计划(bfs)

    -->A计划 Descriptions: 可怜的公主在一次次被魔王掳走一次次被骑士们救回来之后,而今,不幸的她再一次面临生命的考验.魔王已经发出消息说将在T时刻吃掉公主,因为他听信谣言说吃公主的 ...