document.getElementsByClassName不起作用

Question

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

盡管僅使用document.getElementsByClassName(element)即可將元素正確打印到控制台，但即使使用document.getElementsByClassName(element)[0].offsetHeight也無法訪問offsetHeight屬性。

我需要運行循環嗎？

Answer 1

document.getElementsByClassName(element)返回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;