浏览器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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • flowable实战(八)flowable核心数据库表详细表字段说明

    flowable实战(八)flowable核心数据库表详细表字段说明数据模型设计清单 数据表分类 描述 ACT_GE_* 通用数据表 ACT_RE_* 流程定义存储表 ACT_ID_* 身份信息表 ACT_RU_* 运行时数据库表 ACT_HI_…

    2022年5月21日
    390
  • 关于UDP接收icmp端口不可达(port unreachable)

    关于UDP接收icmp端口不可达(port unreachable)本篇分为3部分1:报文格式2:产生的原因3:linux协议栈如何处理4:应用层如何获取1:报文如下,10.30.13.1往10.30.16.10的80端口发送了一个UDP报文,80端口其实监听的是TCP。服务器回复了一个类型为端口不可达的ICMP,ICMP数据部分就是请求UDPip层及其以上的数据。2:原因首先原因就是接收udp报文…

    2022年7月12日
    15
  • 最小生成树的个数_最小生成树的两种算法

    最小生成树的个数_最小生成树的两种算法给定一张 N 个点 M 条边的无向图,求无向图的严格次小生成树。设最小生成树的边权之和为 sum,严格次小生成树就是指边权之和大于 sum 的生成树中最小的一个。输入格式第一行包含两个整数 N 和 M。接下来 M 行,每行包含三个整数 x,y,z,表示点 x 和点 y 之前存在一条边,边的权值为 z。输出格式包含一行,仅一个数,表示严格次小生成树的边权和。(数据保证必定存在严格次小生成树)数据范围N≤105,M≤3×105输入样例:5 61 2 11 3 22 4 33 5 4

    2022年8月9日
    8
  • linux下安装opencv_linux下安装pycharm

    linux下安装opencv_linux下安装pycharm一、RabbitMQ介绍RabbitMQ是一个开源的AMQP实现,服务器端用Erlang语言编写,支持多种客户端,如:Python、Ruby、.NET、Java、JMS、C、PHP、ActionScript、XMPP、STOMP等,支持AJAX。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。AMQP,即AdvancedMessageQ…

    2022年9月28日
    1
  • oracle创建数据库详解,详解Oracle手工创建数据库-Oracle「建议收藏」

    oracle创建数据库详解,详解Oracle手工创建数据库-Oracle「建议收藏」下面就介绍一下Oracle手动创建数据库的步骤:1、确定新建数据库名称和实例名称;2、确定数据库管理员的认证方式;3、创建初始化参数文件;www.2cto.com4、创建实例;5、连接并启动实例;6、使用createdatabase语句Oracle创建数据库;7、创建附加的表空间;8、运行脚本创建数据字典视图;下面以创建一个名为“MYNEWDB”的数据库为例1、确定数据库名称与实例名称;1.DB…

    2022年9月22日
    6
  • 为什么有的文件从SVN上更新不下来

    为什么有的文件从SVN上更新不下来

    2021年10月20日
    46

发表回复

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

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