浏览器offsetWidth、clientWidth、scrollWith等总结

浏览器offsetWidth、clientWidth、scrollWith等总结  对象尺寸会涉及width和height,我们以width为例,height则是一样的道理。  1、clientWidth:对象可见的宽度,不包括滚动条等边线,会随窗口的显示大小改变。  clientWidth = 元素width+padding  2、scrollWidth:实际内容的宽,不包括边线宽度,会随着对象中内容的多少改变。  无滚动时等于c…

大家好,又见面了,我是你们的朋友全栈君。

    对象尺寸会涉及width和height,我们以width为例,height则是一样的道理。

    1、clientWidth:对象可见的宽度,不包括滚动条等边线,会随窗口的显示大小改变。

    clientWidth  =  元素width + padding

    2、scrollWidth:实际内容的宽,不包括边线宽度,会随着对象中内容的多少改变。

    无滚动时等于clientWidth,有滚动时,需要计算

    3、offsetWidth:对象的可见宽度,包括滚动条等边线,会随窗口的显示大小改变。

    offsetWidth  =  元素width + padding + border

    CSS中的margin属性,与clientWidthoffsetWidth均无关

 

浏览器offsetWidth、clientWidth、scrollWith等总结

    4、width:不包括滚动条和工具条的宽度。

    5、innerWidth:窗口中文档显示区域的宽度,不包括菜单栏、工具栏等部分,该属性可读可写。注意,IE浏览器不支持该属性。

    6、outerWidth:窗口中文档显示区域的宽度,包含菜单栏、工具栏等部分。

        获取outerWidth有两个jquery方法

        outerWidth():outerWidth  =  padding + border

        outerWidth(true): outerWidth  =  margin + padding + border

 

    注意事项:

    1.获取这些尺寸信息时,clientWidth、scrollWidth和offsetWidth用<document.getElementById(‘Id’).属性>形式获取,它们是javascript对象属性,没有jquery方法。

    2.有jquery方法的是: width()、 innerWidth()outerWidth()outerWidth(true)

    3.一般情况下 width() <= innerWidth() <= outerWidth() <= outerWidth(true)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/163057.html原文链接:https://javaforall.net

(0)
上一篇 2022年7月22日 下午4:00
下一篇 2022年7月22日 下午4:00


相关推荐

  • mqtt安卓客户端_网络抓包工具哪个好

    mqtt安卓客户端_网络抓包工具哪个好MQTT客户端工具介绍概览在学习和使用MQTT的过程中,一个得心应手的客户端工具可以极大的方便使用者进行MQTT特性的探索和功能组件的调试。来自世界各地的开发者们围绕不同操作系统、运行平台,开发出了许多针对MQTT协议的客户端测试工具。这些客户端工具种类繁多,功能侧重点不尽相同,质量层次不齐,因此,对于初学者乃至MQTT专家来说,如何选择一个适用的MQTT客户端工具是一个难题。本篇文章将尽可能的搜集整理,对市面上各类MQTT客户端工具做一个全面的测评以供读者参考。MQTT

    2025年7月7日
    6
  • SAS学习笔记25 t检验(单个样本t检验、配对样本t检验、两个独立样本t检验及方差不齐时的t’检验)…

    SAS学习笔记25 t检验(单个样本t检验、配对样本t检验、两个独立样本t检验及方差不齐时的t’检验)…根据研究设计和资料的性质有单个样本t检验、配对样本t检验、两个独立样本t检验以及在方差不齐时的t’检验单样本t检验单样本t检验(one-samplet-test)又称单样本均数t检验,适用于样本均数$\overline{X}$与已知总体均数$\mu_{0}$的比较,其比较目的是检验样本均数所代表的总体均数µ是否与已知总体均数$\mu_{0}$有差别已知总体均数$\mu_{0…

    2022年6月19日
    33
  • Java-异或运算

    Java-异或运算Java 异或运算异或运算法则异或的运算方法是一个二进制运算 例图 总结例题 1 例题 2 136 只出现一次的数字 力扣 异或运算法则 nbsp nbsp nbsp nbsp 1 a b b a 2 a b c a b c a b c 3 d a b c nbsp nbsp nbsp nbsp nbsp nbsp nbsp nbsp 可以推出 a d

    2026年3月16日
    2
  • python常用模块大全_日常办公会用到的python模块

    python常用模块大全_日常办公会用到的python模块mathmath.ceil(a):用来返回≥a的最小整数math.floor(a):用来返回≤a的最大整数round(a[,b])如果没有参数b,只有a,round()作用是四舍五入如果

    2022年7月29日
    14
  • HashMap遍历的五种方法「建议收藏」

    HashMap遍历的五种方法「建议收藏」HashMap遍历的五种方法

    2025年10月13日
    3
  • TEZ深入理解

    TEZ深入理解简介 Tez 是 Apache 最新的支持 DAG 作业的开源计算框架 它可以将多个有依赖的作业转换为一个作业从而大幅提升 DAG 作业的性能 Tez 并不直接面向最终用户 事实上它允许开发者为最终用户构建性能更快 扩展性更好的应用程序 Hadoop 传统上是一个大量数据批处理平台 但是 有很多用例需要近乎实时的查询处理性能 还有一些工作则不太适合 MapReduce 例如机器学习 Tez 的目的就是帮助 Hadoop

    2026年3月19日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号