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)


相关推荐

  • uint32-t_c语言uint32_t类型

    uint32-t_c语言uint32_t类型uint32_tu:代表unsigned即无符号,即定义的变量不能为负数;int:代表类型为int整形;32:代表四个字节,即为int类型;_t:代表用typedef定义的;整体代表:用typedef定义的无符号int型宏定义;uint8_t:u:代表unsigned即无符号,即定义的变量不能为负数;int:代表类型为int整形;8:代表一个字节…

  • mysql的索引有哪几种_MySQL索引数据结构

    mysql的索引有哪几种_MySQL索引数据结构摘要腾兴网为您分享:mysql索引类型有哪些,易信,微商助手,刷机精灵,数字涂色等软件知识,以及家校即时通,内部通讯录,叫叫识字大冒险,天天酷跑,手机电视高清直播,短信验证软件,诛仙表情包,一手女装,iis7,instagram视频,搭建卡盟主站,umbrella,qq音乐qmc0格式,图片降噪,钢筋锈蚀检测仪等软件it资讯,欢迎关注腾兴网。介绍各种类型的mysql索引。1、普通索引普通索引…

  • 结合Cookie的简单图片验证码的工作原理探究

    结合Cookie的简单图片验证码的工作原理探究在系统登录时,往往需要同时提交一个验证码。验证码的作用是验证登录者是不是人,因为人能轻松识别的图片,对于机器来说难度却比较大,因此在登陆时进行验证码校验可以阻断大部分爬虫机器人的骚扰,成本低,收益大,使得图片验证码得到了广泛的应用。本文通过网络分析的方式,stepbystep地探索了图片验证码的工作原理,文章技术门槛低,可读性和可操作性较强,适用于各种闲着没事干的无聊分子。1.百度“系统登录”,随便找了个登录网站:http://scm.fstvgo.com/2.打开该网站,按F12打开.

  • spring ajax 长轮询,Ajax轮询和长轮询

    spring ajax 长轮询,Ajax轮询和长轮询缺点:Ajax轮询需要服务器有很快的处理速度与快速响应。longpoll需要很高的并发,体现在同时容纳请求的能力。一、轮询是在浏览器客户端实现的:如果从后端获取数据成功则停止请求。$(function(){varcode,status;functiongetResult(){varparams={code:code,operate:’什么操作TODO:’,};$.ajax({typ…

    2022年10月14日
  • eigen库使用_eigen3

    eigen库使用_eigen3Eigen库的安装1.VisualStudio2017安装eigen库1.1下载eigen库1.2配置1.3运行测试1.VisualStudio2017安装eigen库1.1下载eigen库eigen官网下载地址找到自己需要的版本下载,我下载的是3.3.9,箭头指向的zip。解压缩得到文件eigen-3.3.9,放到自己想放置的路径下(后面会引用此处的路径)。1.2配置在VS2017中新建一个空项目,取名为“eigen_demo”。输入以下测试

    2022年10月19日
  • js正则 手机号_正则表达式 手机号

    js正则 手机号_正则表达式 手机号RegExp对象正则表达式是描述字符模式的对象。正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具。//匹配手机号//varres=/^[1][3,4,5,6.7,8,9][0-9]{9}$///letnum=18045216903//console.log(res.test(num))//匹配身份证号码//varres=/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)///varn=’5203

发表回复

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

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