Question

我一直在网上使用课程，现在我想计算课程的高度。它是一个独特的类（除了一个以外的任何地方都没有使用）。我在Javascript中尝试了height和<div class="example">some text some text some text some text some text".</div> <button onclick="myFunction()">Try it</button>但无法找到任何输出。假设这是我的代码。

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

这是Javascript

var modelstring="something";

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

Answer 1

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>

Answer 2

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

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>

Answer 3

getElementsByClassName() 会返回一个对象数组，因此您必须指定所需的对象，例如：

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

选择第一个对象。

希望这有帮助。

Answer 4

像这样改变您的代码。将会工作

var height = document.getElementsByClassName("example")[0].offsetHeight;    
console.log(height);

无法计算班级高度

4 个答案: