无法计算班级高度

Unable to calculate class height

本文关键字：高度 计算      更新时间：2023-09-26

我一直在网上使用类，现在我想计算一个类的高度。它是一个唯一的类（除了一个类之外，其他任何地方都不使用）。我在Javascript中尝试了offsetHeight和height，但找不到任何输出。假设这是我的代码。

<div class="example">some text some text some text some text some text".</div>
<button onclick="myFunction()">Try it</button>

这是Javascript

<script>
function myFunction() {
document.getElementsByClassName("example").offsetHeight="300px";
}
</script>

错误：
我在页面或控制台的任何地方都没有得到任何输出/错误。希望你们能帮助我，我只想要Javascript的解决方案，而不是jQuery或任何其他库。任何帮助都将不胜感激。

getElementsByClassName返回HTMLCollection，所以您需要从这个集合中获取第一个元素

function myFunction() {
  var element = document.getElementsByClassName("example")[0];
  // get height
  var height = element.offsetHeight;
  console.log(height);
  // set height
  element.style.height = '100px';
}
<div class="example">some text some text some text some text some text".</div>
<button onclick="myFunction()">Try it</button>

您需要使用对象列表索引上的整数值：

document.getElementsByClassName("example")[0].offsetHeight = 300;

getElementsByClassName返回匹配元素的数组。所以你实际上是在一个数组上应用这个函数，这没有任何效果。

工作代码段

function myFunction() {
  alert(document.getElementsByClassName("example")[0].offsetHeight);
}
<div class="example">some text some text some text some text some text".</div>
<button onclick="myFunction();">Try it</button>

getElementsByClassName（）将返回一个对象数组，因此您必须指定所需的对象，例如：

var class_height = document.getElementsByClassName("example")[0].offsetHeight;

选择第一个对象。

希望这能有所帮助。

这样更改您的代码。将运行

var height = document.getElementsByClassName("example")[0].offsetHeight;    
console.log(height);
相关文章：