使用JavaScript获取网页中各种高度的方法

分类：知识百科 日期： 点击：0

有很多，下面介绍几种常用的方法。

1. 使用offsetHeight

offsetHeight是元素的高度，包括元素的padding、border和滚动条，但不包括margin，可以通过以下语句获取元素的高度：

var height = document.getElementById("elementId").offsetHeight;

2. 使用clientHeight

clientHeight是元素的可视高度，包括元素的padding，但不包括border和margin，可以通过以下语句获取元素的可视高度：

var height = document.getElementById("elementId").clientHeight;

3. 使用scrollHeight

scrollHeight是元素的滚动高度，包括元素的padding、border、margin和滚动条，可以通过以下语句获取元素的滚动高度：

var height = document.getElementById("elementId").scrollHeight;

4. 使用getBoundingClientRect

getBoundingClientRect是一个元素的大小及其相对于视口的位置，可以通过以下语句获取元素的高度：

var rect = document.getElementById("elementId").getBoundingClientRect();
var height = rect.height;

5. 使用getComputedStyle

getComputedStyle是一个元素的实际样式，可以通过以下语句获取元素的高度：

var style = window.getComputedStyle(document.getElementById("elementId"));
var height = style.height;

6. 使用innerHeight

innerHeight是元素的内部高度，包括元素的padding、border，但不包括margin，可以通过以下语句获取元素的内部高度：

var height = window.innerHeight;

7. 使用outerHeight

outerHeight是元素的外部高度，包括元素的padding、border和margin，可以通过以下语句获取元素的外部高度：

var height = window.outerHeight;

以上就是，希望能够帮助到大家。

标签：

版权声明

1. 本站所有素材，仅限学习交流，仅展示部分内容，如需查看完整内容，请下载原文件。
2. 会员在本站下载的所有素材，只拥有使用权，著作权归原作者所有。
3. 所有素材，未经合法授权，请勿用于商业用途，会员不得以任何形式发布、传播、复制、转售该素材，否则一律封号处理。
4. 如果素材损害你的权益请联系客服QQ：77594475 处理。

滇ICP备2022006959号-4