详解DOM对象中clientWidth、offsetWidth等属性

详解DOM对象中clientWidth、offsetWidth等属性我们有时需要获得鼠标在某盒子中的位置,或者是随意移动某盒子的位置,在这些场景中我们可能经常需要用到clientWidth、offsetWidth、offsetTop啊等等。但是对于初学者来说(包括我),看到这些就头疼,因为感觉意思都相近,但作用却不同,所以今天天我就来捋一捋,搞清楚,后面好干活。好吧,废话不多说,开始吧。先上一下示例代码,下面要用到。HTML:…

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

我们有时需要获得鼠标在某盒子中的位置,或者是随意移动某盒子的位置,在这些场景中我们可能经常需要用到clientWidth、offsetWidth、offsetTop啊等等。但是对于初学者来说(包括我),看到这些就头疼,因为感觉意思都相近,但作用却不同,所以今天天我就来捋一捋,搞清楚,后面好干活。好吧,废话不多说,开始吧。

先上一下示例代码,下面要用到。

HTML:                                                              

详解DOM对象中clientWidth、offsetWidth等属性

CSS:

详解DOM对象中clientWidth、offsetWidth等属性

JS:

详解DOM对象中clientWidth、offsetWidth等属性

详解DOM对象中clientWidth、offsetWidth等属性

一、clientWidth和clientHeight

clientWidth和clientHeight的计算方式是一样的,只不过一个为水平方向,一个为垂直方向,接下来我就只用clientWidth来说明情况。clientWidth与只与元素有关,它的计算方式如下。

clientWidth=width(样式中设置的)+左padding+右padding-垂直滚动条宽度。

同理,clientHeight=height+顶部padding+底部padding-水平滚动条宽度。

以下是示例(div#sub-content没有添加margin):

clientwidth

详解DOM对象中clientWidth、offsetWidth等属性

输出:

详解DOM对象中clientWidth、offsetWidth等属性

clientWidth:200+10+10-17(滚动条宽度)=203

 

二、offsetWidth和offsetHeight

offsetWidth与offsetHeight有个特点,就是这两个属性的值只与该元素有关,与周围元素(父级和子级元素无关)。

它们的大小取决于元素的宽高、padding以及边框border,有无滚动条都没有影响,下面是他们的计算方式。

offsetWidth=width(样式中设置的)+左右padding+左右border

offsetHeight=height(样式中设置的)+上下padding+上下border

以下是示例(#sub-content的高度改为100px):

详解DOM对象中clientWidth、offsetWidth等属性

详解DOM对象中clientWidth、offsetWidth等属性

输出:

详解DOM对象中clientWidth、offsetWidth等属性

三、offsetParent

也许你看到这里会觉得奇怪,怎么突然冒出个offsetParent出来,先别急,后面我要讲offsetTop和offsetLeft,因为这两个和offsetParent离不开关系,所以我就先好后介绍一下offsetParent。

offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素的引用。

  总的来说两条规则:

  1、如果当前元素的父级元素没有进行CSS定位(position为absolute或relative),offsetParent为body。

  2、如果当前元素的父级元素中有CSS定位(position为absolute或relative),offsetParent取最近的那个父级元素。

我们以上面代码为例,可以看到div#content并没有设置定位position,接下来我们要查找div#sub-content的offsetParent,

看下面演示。

详解DOM对象中clientWidth、offsetWidth等属性

输出:

详解DOM对象中clientWidth、offsetWidth等属性

当div#content添加定位position:reletive;样式,并将tagName换为id时

详解DOM对象中clientWidth、offsetWidth等属性

输出:

详解DOM对象中clientWidth、offsetWidth等属性

 

四、offsetTop和offsetLeft

offsetTop和offsetLeft这两个属性和offsetWidth和offsetHeight不同的是,它们受到offsetParent的影响(offsetParent上面有讲),

MSDN上对offsetLeft的定义是:

The HTMLElement.offsetLeft read-only property returns the number of pixels that the upper left corner of the current element is offset to the left within the HTMLElement.offsetParent node.

指的是offsetLeft只读属性返回当前元素左上角在offsetParent节点内向左偏移的像素数。

从这个定义中我们可以明确地知道offsetLeft与当前元素的margin-left和offsetParent的padding-left有关。也就是说应该是:

offsetLeft=(offsetParent的padding-left)+(中间元素的offsetWidth)+(当前元素的margin-left)。

offsetTop=(offsetParent的padding-top)+(中间元素的offsetHeight)+(当前元素的margin-top)。

我们为上面代码的div#content添加一个子元素div#sub1

详解DOM对象中clientWidth、offsetWidth等属性

并添加样式(说明以下,div#sub-content的高度被我改成了50px)

详解DOM对象中clientWidth、offsetWidth等属性

演示图如下

详解DOM对象中clientWidth、offsetWidth等属性

可以知道,div#sub-content的offsetParent并不是div#content,而是BODY,我们打印一下offsetTop

详解DOM对象中clientWidth、offsetWidth等属性

输出:

详解DOM对象中clientWidth、offsetWidth等属性

112=20(div#content margin-top)+10(div#content border-top)+10(div#content padding-top)+52(#divsub1  height+border) + 20(div#sub-content margin-top)

接下来我们为div#content添加定位position:relative;

最后输出:

详解DOM对象中clientWidth、offsetWidth等属性

可以知道div#sub-content的offsetParent变成div#content。

 

五、scrollWidth和scrollHeight

scrollWidth和scrollHeight这两个属性用来获取指定元素内容层的真实宽度和高度.

当不存在水平或垂直滚动条时,scrollWidth和scrollHeight等于clientWidth和clientHeight,

当存在水平或垂直滚动条时,请看下面演示(将div#sub-contetn的height设为300px)

详解DOM对象中clientWidth、offsetWidth等属性

详解DOM对象中clientWidth、offsetWidth等属性

输出:

详解DOM对象中clientWidth、offsetWidth等属性

可以看到图中存在垂直方向的滚动条

scrollWidth=clientWidth=width+左右padding-滚动条宽度=203

scrollHeight=20(div#content padding)+40(div#sub-content margin)+20(div#sub-content border)+20(div#sub-content padding)+300(div#sub-content height)=400

可以看出来其实scrollWidth和scrollHeight等于clientWidth和clientHeight还是有很大联系的,当内容层的高宽度超过指定元素的高宽度时,scrollWidth和scrollHeight还得在clientWidth和clientHeight的基础上加上内容层增加高度以及减去相应的滚动条宽度。

也可以这样理解,scrollWidth和scrollHeight即可视区域宽高度+被隐藏区域宽高度。

六、scrollTop和scrollLeft

 scrollLeft:对象的最左边到对象在当前窗口显示的范围内的左边的距离,即在出现了横向滚动条的情况下,滚动条拉动的距离。

scrollTop对象的最顶部到对象在当前窗口显示的范围内的顶边的距离,即在出现了纵向滚动条的情况下,滚动条拉动的距离。

详解DOM对象中clientWidth、offsetWidth等属性

 

下面的图有些复杂,但可以稍微看看。

 

详解DOM对象中clientWidth、offsetWidth等属性

 

最近开了个公众号用于推送前端学习总结,有兴趣的可以关注一下。

公众号:菜鸟札记

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

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

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

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

(0)
blank

相关推荐

  • CentOS7中关闭firewall,并使用iptables管理防火墙

    CentOS7中关闭firewall,并使用iptables管理防火墙

    2021年10月19日
  • FTP协议是一种用于什么的协议

    FTP协议是一种用于什么的协议FTP协议是一种用于什么的协议FTP(FileTransferProtocol,文件传输协议)是TCP/IP协议组中的协议之一。复FTP协议包括两个组成部分,其一为FTP服务器,其二为FTP客户端。其中FTP服务器用来存储文件,用户可以使用FTP客户端通过FTP协议访问位于FTP服务器上的资源。在开发网站的时候,通常利用FTP协议把网页或程序传制到Web服务器上。此外,由于FTP传输效率非常高,在网络上传输大的文件时,一般也采用该协议。扩展资料FTP协议的任务从一台计算机.

  • win10 1分钟自动重启_windows7一分钟后自动重启

    win10 1分钟自动重启_windows7一分钟后自动重启前言Charles是收费软件,可以免费试用30天。试用期过后,未付费的用户仍然可以继续使用,但是每次使用时间不能超过30分钟,并且启动时将会有10秒种的延时。此时,我们只需网上找一个注册码即可解

  • php二维码分享到朋友圈,php实现的微信分享到朋友圈并记录分享次数功能

    php二维码分享到朋友圈,php实现的微信分享到朋友圈并记录分享次数功能本文实例讲述了php实现的微信分享到朋友圈并记录分享次数功能。分享给大家供大家参考,具体如下:1.引入JS文件2.通过config接口注入权限验证配置3.通过ready接口处理成功验证4.通过error接口处理失败验证JSDK档说明:https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html(1)(2)页面加入获取we…

  • PyTorch源码解读之torchvision.models「建议收藏」

    PyTorch源码解读之torchvision.models「建议收藏」PyTorch框架中有一个非常重要且好用的包:torchvision,该包主要由3个子包组成,分别是:torchvision.datasets、torchvision.models、torchvision.transforms。这3个子包的具体介绍可以参考官网:http://pytorch.org/docs/master/torchvision/index.html。具体代码可以参考github:

  • vector初始化与清空[通俗易懂]

    vector初始化与清空[通俗易懂]vector初始化与清空vector初始化vector<int>v;如果直接进行访问v[i]会报错解决方案:可以使用v.resize(n)或者v.resize(n,m)来初始化,前者是使用n个0来初始化,后者是使用n个m来初始化。vector清空//1.clear,清空元素,但不回收空间v.clear();//2.swap,清空元素并回收内存vector<int>().swap

发表回复

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

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