js 获取元素的实际高度
在JavaScript中，获取元素的实际高度通常指的是获取元素内容的实际高度，包含内容、内边距（padding）、边框（border），但不包含外边距（margin）。以下是几种常用的方法：
1. offsetHeight
offsetHeight 属性返回元素的像素高度，包括元素的高度、水平滚动条（如果存在）、内边距和边框，但不包括外边距。
var element = document.getElementById('myElement');
var height = element.offsetHeight;
console.log(height);2. clientHeight
clientHeight 属性返回元素的可视高度，包括元素的高度和内边距，但不包括边框、外边距和滚动条。
var element = document.getElementById('myElement');
var height = element.clientHeight;
console.log(height);3. getBoundingClientRect()
getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。这个方法返回的对象包含了 height 属性，表示元素的实际高度，包括内容、内边距和边框，但不包括外边距。
var element = document.getElementById('myElement');
var rect = element.getBoundingClientRect();
var height = rect.height;
console.log(height);4. scrollHeight
scrollHeight 属性返回元素内容的整个高度，包括由于溢出而不可见的内容。这个值通常大于或等于 clientHeight。
var element = document.getElementById('myElement');
var height = element.scrollHeight;
console.log(height);应用场景
- 布局调整：在响应式设计中，根据元素的实际高度调整布局。
- 动画效果：在动画效果中，根据元素的实际高度进行动画计算。
- 滚动处理：在处理滚动事件时，根据元素的实际高度进行滚动位置的计算。
注意事项
offsetHeight和clientHeight不包括外边距（margin），如果需要获取包括外边距的高度，可以使用getComputedStyle结合margin属性进行计算。getBoundingClientRect()返回的高度是相对于视口的，如果需要相对于文档的高度，需要进行相应的计算。
示例代码
以下是一个综合示例，展示如何获取元素的实际高度（包括内容、内边距和边框）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Element Height</title>
<style>
#myElement {
height: 100px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}
</style>
</head>
<body>
<div id="myElement">Hello, World!</div>
<script>
var element = document.getElementById('myElement');
console.log('offsetHeight:', element.offsetHeight); // 130 (100 + 20*2 + 5*2)
console.log('clientHeight:', element.clientHeight); // 120 (100 + 20*2)
console.log('getBoundingClientRect().height:', element.getBoundingClientRect().height); // 120
console.log('scrollHeight:', element.scrollHeight); // 120 (if no overflow)
</script>
</body>
</html>通过这些方法，你可以根据具体需求选择合适的方式来获取元素的实际高度。
相关·内容
6回答
在CSS中，当你将某个东西的宽度或高度设置为100%时，它实际上只是将其设置为浏览器窗口的100%。有没有办法让它100%覆盖整个页面？让我换个说法:我希望这个元素(一个div)占据整个页面，不管你滚动多少次。拥有100%大小和100%宽度的父元素是不起作用的，因为它们被以相同的方式对待。我开始想，我可能必须使用JS来获取页面的高度，然后完全定义它。
浏览 0提问于2009-12-21得票数 2
回答已采纳
2回答
我在网页的一侧放置了一个选项卡式UI，并使用表、div和trs的高度/宽度百分比值完成了整个工作。在Chrome中，页面看起来是正确的，但在firefox中，某个表似乎不受其高度设置的影响，并扩展到页面之外。msgStr += 'table id="msgTable" height="85%" width="100%&qu
浏览 2提问于2010-08-12得票数 1
回答已采纳
我想找到CSS定义，它允许我获取元素的实际高度，并从中减去一个固定量。height: calc(100% - 20px)
但是看起来100%实际上并不是指元素的动态高度
浏览 12提问于2017-12-23得票数 1
3回答
我创建了两个视图块“新闻”和“博客”，它们并排驻留在我的头版上。
这两个视图都有20个内容(但可以是任意数字)和一个寻呼机。如何在视图块中显示内容，使两个视图以相同的高度结束，而不管显示的内容数量如何。
浏览 0提问于2014-03-31得票数 0
回答已采纳
2回答
我正在尝试使用jQuery获取元素的宽度和高度。现在，我有了一个函数，它将一个跨度包含在元素周围，并从临时跨度元素中获取大小。style="display:block"></div>
<div id="result"><
浏览 8提问于2013-06-30得票数 0
我正在尝试使用konva js插件概念来调整canavas中元素的大小。但调整后的宽度和高度不会保存到数据库中。我的实际高度宽度不会被任何元素的调整后的高度宽度所取代，无论是图像、图层还是舞台
浏览 46提问于2019-10-23得票数 0
3回答
我使用jquery .height()来获取文档高度。获取高度后，我将元素放在该位置。你可以看到的文档高度实际上是错误的，因为它超出了区域。谢谢!
浏览 0提问于2012-05-17得票数 0
或者，问题可能是布局文件中的元素是否可以引用其值可以在运行时更改的‘变量’？Android:layout_height=“？属性/操作栏大小”用例将有一个布局元素，它的高度是动态变化的。是否可以在布局文件中将<e
浏览 3提问于2015-01-11得票数 1
当使用getComputedStyle来获取一个已经倾斜的元素的高度(transform: skewY(-10deg))时，这个值就是在转换之前的元素的高度。例如，在我的例子中，div的高度是600px，但在垂直空间中覆盖了大约700px。有没有办法获得实际渲染的高度？
浏览 1提问于2021-10-15得票数 0
2回答
图像的标题也需要包含在填充中，所以实际上我需要添加“<figure>”类的是tall父元素，而不是<img>标记。因此，我尝试向所有具有高度大于宽度的子<img>的<figure>元素添加一个类。我的问题是，虽然<img>指定了高度和宽度，但<figure>只指定了高度，所以下面的代码导致一个“wide”类被添加到所有图像中，因
浏览 25提问于2019-07-20得票数 0
回答已采纳
1回答
当使用引导折叠插件时，我在元素面板中注意到有一个元素的内联高度属性动画。我希望删除这个(从实际的核心 Collapse.js / Transition.js插件中删除)，因为我使用的是纯CSS3动画/转换。
原因有两个: a/ I不需要它，b/它与我自己的动画冲突，元素首先扩展到脚本计算的高度，然后在15 is的
浏览 4提问于2017-02-03得票数 0
假设元素的高度设置为“auto”。试图获取jQuery中的高度将返回计算出来的高度。有没有一种方法可以得到实际的CSS值(auto)而不是像素的高度？
浏览 0提问于2013-10-16得票数 4
回答已采纳
我有一个块容器元素，它包含块元素，然后是一些比父容器更高的浮动元素。我想使用块元素设置的高度，并去掉较高的浮动元素。
我的想法是使用overflow:隐藏，但是注意！它创建了一个新的块格式化上下文，这样父元素就不再使用块元素的高度，而是使用浮动元素的高度，因此实际</
浏览 0提问于2013-12-18得票数 0
6回答
<span class="date">7 days ago</span>我想知道使用javascript时这个div的高度这个div有一个固定大小的宽度(在本例中是150 in)。我只想知道div的高度，说文字变了。首选的方法是通过jQuery，但javascript也不错。编辑：
这里一个非常重要的注意事项是，这是在呈现div之前
浏览 5提问于2013-06-07得票数 13
回答已采纳
2回答
我有一个div元素，假设它的自动高度是300px。我想动画它的高度回到它的默认高度。我所知道的唯一解决方案是克隆div，存储它的高度并相应地使用它。).height("auto").appendTo("body");
$('div').animate({"height": el
浏览 2提问于2013-04-24得票数 0
我有一个关于jquery .css函数的问题。我使用它来获取高度设置为auto的元素的实际高度。我使用的代码是：问题是，.css函数有时返回"0px"，有时返回"auto"，有时返回实际</em
浏览 1提问于2013-01-10得票数 1
1回答
我使用$(window).width() and $(window).height()获取get视图的宽度和高度，但是这些值总是返回相同的值，以及整个get视图的实际宽度和高度。我需要的是获取视图端口的宽度和高度，用户目前只看到它，所以当缩放视图端口的宽度和高度时，应该会变小。
我需要这样做，以便在用户只看到的View端口中居中div元素
浏览 2提问于2016-04-18得票数 3
回答已采纳
我有一个CSS网格，在网格的一个区域中有一个可滚动的元素。我想要的是，如果内容太小而不适合区域，项目将缩小。为此，我将align-self设置为start。
如何在使用align-start的同时仍然将高度限制为网格区域的高度？我本以为这是默认行为。一种解决方案是让元素拉伸，然后在其
浏览 12提问于2021-03-12得票数 1
我想要获取class元素中段落元素的高度。"> <p>another great text</p>现在我想访问div元素的总高度，但也想访问子元素p的高度。我想用jQuery设置div的高度</
浏览 2提问于2014-11-13得票数 0
:-)
在我链接的帖子中，我认为解决问题的方法是，如果一个div的可见高度大于另一个div的可见高度，则更改链接的目标。在我的布局中，我提到的所有div的高度都是1100px。但这不是我想要的。我想要的脚本得到的div的高度，这是当前可见的游客，而不是它的实际</em
浏览 0提问于2013-01-03得票数 8
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
