Question

function getHeight(element) {
    console.log(element);
    var offsetHeight = document.getElementsByClassName(element).offsetHeight;
    console.log(offsetHeight);
}
getHeight("card-1");

虽然它只用document.getElementsByClassName(element)正确地将元素打印到控制台但是我无法访问offsetHeight属性，即使使用document.getElementsByClassName(element)[0].offsetHeight

我是否必须运行循环？

Answer 1

document.getElementsByClassName(element)会返回HTMLCollection个元素。该集合没有offsetHeight属性，集合中的每个元素都有。

现在，如果你想获得第一个匹配元素的offsetHeight，你可以简单地使用
document.getElementsByClassName(element)[0].offsetHeight

如果您想要所有匹配元素的最大值或最小值offsetHeight，则需要迭代该集合。

Answer 2

根据文件https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName

document.getElementsByClassName(classNames)

返回html元素的集合（实际上是HTMLCollection的实例）所以如果你运行这个代码它应该工作

    var collection = document.getElementsByClassName(classNames),
      offset = -1;

    if (collection.length > 0) {
      offset = collection[0].offsetHeight;
    }

    return offset;

document.getElementsByClassName不起作用

2 个答案: