浏览器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)

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 只看这一篇就够:快速了解联邦学习技术及应用实践[通俗易懂]

    只看这一篇就够:快速了解联邦学习技术及应用实践[通俗易懂]随着大数据的进一步发展,重视数据隐私和安全已经成为了世界性的趋势,同时,大多数行业数据呈现数据孤岛现象,如何在满足用户隐私保护、数据安全和政府法规的前提下,进行跨组织的数据合作是困扰人工智能从业者的一大难题。而“联邦学习”将成为解决这一行业性难题的关键技术。今天和大家分享下咱们微众银行AI团队主导的新一代联邦学习技术及应用,并详细介绍联邦学习落地的全球首个工业级开源平台——Federated…

    2022年10月30日
  • 大学《数据库系统》课程设计报告「建议收藏」

    大学《数据库系统》课程设计报告「建议收藏」湖南科技大学计算机科学与工程学院《数据库系统》课程设计题目:教学管理系统专业:计算机科学与技术年级:2017级班级:计科三班学号:170510323姓名:雨萱完成时间:2019年1月3日教务管理系统的分析与实现一.实验目的数据库系统课程设计是为了配合数据库原理及应用开发而…

  • IIC通信协议详解

    IIC通信协议详解IIC通信协议详解IIC的概述IIC分为软件IIC和硬件IICIIC通信协议空闲状态开始信号与停止信号开始信号程序:IIC的概述IIC:两线式串行总线,它是由数据线SDA和时钟线SCL构成的串行总线,可发送和接收数据。在CPU与被控IC之间、IC与IC之间进行双向传送,高速IIC总线一般可达400kbs以上。时钟线SCL:在通信过程起到控制作用。数据线SDA:用来一位一位的传送数据。IIC分为软件IIC和硬件IIC软件IIC:软件IIC通信指的是用单片机的两个I/O端口模拟出来的IIC,用

  • phpstorm64 2021激活码【在线破解激活】[通俗易懂]

    phpstorm64 2021激活码【在线破解激活】,https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • WinRAR 去除广告弹窗,简单4步亲测有效!

    WinRAR 去除广告弹窗,简单4步亲测有效!非常实用,亲测有效!下载这款破解小可爱软件:ResourceHacker软件很小,不要闲麻烦下载后打开WinRAR.exe,点击字符串表:修改第80:2052删除1272,然后保存。再次使用就没弹窗了,舒服了!参考:https://www.hack520.com/173.html…

  • css如何选择相同class下的第一个class元素和最后一个元素?

    css如何选择相同class下的第一个class元素和最后一个元素?

发表回复

您的电子邮箱地址不会被公开。

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