JS获取元素的大小(高度和宽度)

JS获取元素的大小(高度和宽度)

在 JavaScript中,使用下面 3 组属性可以获取元素的高度和宽度。如表所示。

元素尺寸属性说明
clientWidth获取元素可视部分的宽度,即 CSS 的 width 和 padding 属性值之和,元素边框和滚动条不包括在内,也不包含任何可能的滚动区域
clientHeight获取元素可视部分的高度,即 CSS 的 height 和 padding 属性值之和,元素边框和滚动条不包括在内,也不包含任何可能的滚动区域
offsetWidth元素在页面中占据的宽度总和,包括 width、padding、border 以及滚动条的宽度
offsetHeight元素在页面中占据的高度总和,包括 height、padding、border 以及滚动条的宽度
scrollWidth当元素设置了 overflow:visible 样式属性时,元素的总宽度,也称滚动宽度。在默认状态下,如果该属性值大于 clientWidth 属性值,则元素会显示滚动条,以便能够翻阅被隐藏的区域
scrollHeight当元素设置了 overflow:visible 样式属性时,元素的总高度,也称滚动高度。在默认状态下,如果该属性值大于 clientWidth 属性值,则元素会显示滚动条,以便能够翻阅被隐藏的区域
示例1

使用 offsetWidth 和 offsetHeight 属性获取元素的高度和宽度。

<div style="height:200px;width:200px;">
    <div style="height:50%;width:50%;">
        <div style="height:50%;width:50%;">
            <div style="height:50%;width:50%;">
                <div id="div" style="height:50%;width:50%;border-style:solid;"></div>
            </div>
        </div>
    </div>
</div>
<script>
    var div = document.getElementById("div");
    var w = div.offsetWidth;    // 返回元素的总宽度
    var h = div.offsetHeight;    // 返回元素的总高度
    alert("div.offsetWidth =" + w);
    alert("div.offsetHeight =" +w);
</script>

上面示例在怪异模式和标准模式的浏览器中解析结果差异很大,其中怪异模式解析返回宽度为 21 像素,高度为 21 像素;而在标准模式的浏览器中返回高度和宽度都为 19 像素。

示例2

设计一个简单的盒子,盒子的 height 值为 200 像素,width 值为 200 像素,边框显示为 50 像素,补白区域定义为 50 像素。内部包含信息框,其宽度设置为 400 像素,高度也设置为 400 像素,即定义盒子的内容区域为(400px,400px)。

<div id="div" style="height:200px;width:200px;border:solid 50pxred;overflow:auto;padding:50px;">
    <div id="info" style="height:400px;width:400px;border:solid 1px blue;"></div>
</div>

演示效果如下:

在这里插入图片描述

现在分别调用 offsetHeight、scrollHeight、clientHeight 属性,可以看到获取不同区域的高度和宽度。

var div = document.getElementById("div");
var hc = div.clientHeight;  //可视内容高度为283像素
var ho = div.offsetHeight;  //占据页面总高度为400像素
var hs = div.scrollHeight;  //展开滚动内容总高度为452像素

演示效果如下:

在这里插入图片描述

查看 offsetHeight、scrollHeight、clientHeight 这 3 个属性的不同,具体说明如下:

  • clientHeight = padding-top+height+border-buttom-width- 滚动条的宽度
  • offsetHeight = border-top-width+padding-top+height+padding-buttom+border-buttom-width
  • scrollHeight = padding-top+包含内容的完全高度+padding-bottom

上面围绕元素高度进行说明,针对宽度的计算方式可以以此类推。

offsetWidth 和 offsetHeight 是获取元素宽度和高度的最好方法,但是当元素隐藏显示时,即设置样式属性 display 的值为 none 时,offsetWidth 和 offsetHeight 属性返回值都为 0。

搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

网页可见区域高:document.body.clientHeight

网页正文全文高:document.body.scrollHeight

网页可见区域高(包括边线的高):document.body.offsetHeight

网页被卷去的高:document.body.scrollTop

屏幕分辨率高:window.screen.height

每个HTML元素都具有clientHeight offsetHeight scrollHeight offsetTop scrollTop 这5个和元素高度、滚动、位置相关的属性,单凭单词很难搞清楚分别代表什么意思之间有什么区别。通过阅读它们的文档总结出规律如下:

clientHeight和offsetHeight属性和元素的滚动、位置没有关系它代表元素的高度,其中:

clientHeight:包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。

在这里插入图片描述

offsetHeight:包括padding、border、水平滚动条,但不包括margin的元素的高度。对于inline的元素这个属性一直是0,单位px,只读元素。

在这里插入图片描述

接下来讨论出现有滚动条时的情况:

当本元素的子元素比本元素高且overflow=scroll时,本元素会scroll,这时:

scrollHeight: 因为子元素比父元素高,父元素不想被子元素撑的一样高就显示出了滚动条,在滚动的过程中本元素有部分被隐藏了,scrollHeight代表包括当前不可见部分的元素的高度。而可见部分的高度其实就是clientHeight,也就是scrollHeight>=clientHeight恒成立。在有滚动条时讨论scrollHeight才有意义,在没有滚动条时scrollHeight==clientHeight恒成立。单位px,只读元素。

在这里插入图片描述

scrollTop: 代表在有滚动条时,滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px,可读可设置。

在这里插入图片描述

offsetTop: 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px,只读元素。

在这里插入图片描述

个人总结:

clientHeight:可视区域内容高度,不包含border和padding

offsetHeight:盒子的真实高度,包括border和padding

scrollHeight:盒子内容的真实高度,包括滚动

  • 6
    点赞
  • 30
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值