JS中的位置和宽度:clientWidth、offsetWidth、scrollWidth等区别「建议收藏」

JS中的位置和宽度:clientWidth、offsetWidth、scrollWidth等区别「建议收藏」首先定义一个div。然后稍微装修一下下面开始区分一、clientWidth和clientHeigh、clientTop和clientLeft1,clientWidth的实际宽度clientWidth=width+左右padding2,clientHeigh的实际高度clien…

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

   首先定义一个div。

JS中的位置和宽度:clientWidth、offsetWidth、scrollWidth等区别「建议收藏」

然后稍微装修一下

JS中的位置和宽度:clientWidth、offsetWidth、scrollWidth等区别「建议收藏」

下面开始区分

    一、clientWidth和clientHeigh 、 clientTop和clientLeft

        1,clientWidth的实际宽度

        clientWidth = width+左右padding

        2,clientHeigh的实际高度

         clientHeigh = height + 上下padding 

        3,clientTop的实际宽度

           clientTop = boder.top(上边框的宽度)

        4,clientLeft的实际宽度

            clientLeft = boder.left(左边框的宽度)

    二、offsetWidth和offsetHight 、 offsetTop和offsetLeft

         1,offsetWidth的实际宽度

            offsetWidth = width + 左右padding + 左右boder

         2,offsetHeith的实际高度

                      offsetHeith = height + 上下padding + 上下boder

         3,offsetTop实际宽度

                       offsetTop:当前元素 上边框 外边缘 到 最近的已定位父级(offsetParent) 上边框 内边缘的 距离。如果父

                 级都没有定位,则分别是到body 顶部 和左边的距离

                 4,offsetLeft实际宽度

              offsetLeft:当前元素 左边框 外边缘 到 最近的已定位父级(offsetParent) 左边框 内边缘的            距离。如果父级都没有定位,则分别是到body 顶部 和左边的距离

    三、scrollWidth和scrollHeight 、 scrollTop和scrollLeft

        1,scrollWidth实际宽度

               scrollWidth:获取指定标签内容层的真实宽度(可视区域宽度+被隐藏区域宽度)。

 

               2,scrollHeight的实际高度

 

         scrollHeight:获取指定标签内容层的真实高度(可视区域高度+被隐藏区域高度)

         3,scrollTop

                scrollTop :内容层顶部 到 可视区域顶部的距离。

          实例:var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

          持续获取高度的方式:

          

window.addEventListener(‘scroll’, ()=>{

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

});

                4,scrollLeft

                scrollLeft:内容层左端 到 可视区域左端的距离.

 

 

 

 

 

 

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

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

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

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

(0)
blank

相关推荐

  • AAA认证

    AAA认证AAA:认证、授权、计费的作用1、认证模式为AAA[Huawei]user-interfacevty04[Huawei-ui-vty0-4]authentication-mode?aaaAAAauthenticationpasswordAuthenticationthroughthepasswordofauserterminalinterface[Huawei-ui-vty0-4]authentication-modeaaa–将t.

  • html5爱心代码_html爱心动画代码

    html5爱心代码_html爱心动画代码代码<!doctypehtml><html><head><metacharset=”utf-8″><title>canvas爱心</title><style>html,body{height:100%;padding:0;margin:0;background:#000;}canvas{position:absolute;width:100%;

    2022年10月10日
  • Mycat读写分离的简单实现「建议收藏」

    Mycat读写分离的简单实现「建议收藏」文章目录1、Mycat读写分离的配置1.1、Mycat是什么1.2、Mycat能干什么1.2.1、数据库的读写分离1.2.2、数据库读写分离图解1.2.3、数据库分库分表1.2.3.1、水平拆分(分库)1.2.3.2、垂直拆分(分表)1.3、Mycat的搭建1.3.1、前期准备1.3.2、搭建环境1.3.3、Mycat的安装启动关闭1.3.4、Mycat的配置文件1.3.5、server.xml文件的配置1.3.6、schema.xml文件的配置1.4、测试读写分离1、Mycat读写分离的配置1.1、M

    2022年10月13日
  • 匹配滤波(四种滤波器的幅频特性)

    匹配滤波(matchedfiltering)是最佳滤波的一种。当输入信号具有某一特殊波形时,其输出达到最大。在形式上,一个匹配滤波器由以按时间反序排列的输入信号构成。且滤波器的振幅特性与信号的振幅谱一致。因此,对信号的匹配滤波相当于对信号进行自相关运算。配滤波器是一种非常重要的滤波器,广泛应用与通信、雷达等系统中。从上面的理论推导可以看到,当输出信噪比为最大值的时候,滤波器的传递函数与输入信号的频谱函数满足特定的关系,式2.10就反映了这个关系。满足这种关系的线性滤波器,称之为匹配滤波…

  • iscroll中文文档_如何正确使用

    iscroll中文文档_如何正确使用CDN:iScroll作用于滚动区域的外层,只有容器元素的第一个子元素能进行滚动,其它子元素完全被忽略;初始化方式:

  • H3C路由器动态NAT配置步骤全解析

    H3C路由器动态NAT配置步骤全解析3C路由器所支持的动态NAT地址转换主要包括:NAPT、NOPAT、EASYIP这三种模式。一般情况下,通过在接口上配置所需关联的ACL和内部全局地址池(当采用EASYIP进行配置时不用配置址池)即可实现动态地址转换,让内部网络用户根据ACL(可选配置)所配置的策略动态选择地址池中可用的IP地址进行转换。但要注意:有些H3C设备还支持仅仅通过判断流出接口报文的源地址,而不使用ACL的方式来实现出接口报文的动态地址转换。

    2022年10月10日

发表回复

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

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