javascript - 无法获得标题的高度

Question

这是我的html：

    <header class="white-header">
        <h1>something - <span class="orange">more</span></h1>
        <nav id="head-nav">
            <button>whatever</button>
            <a href="">LOGIN</a>
        </nav>
    </header>

这是我的js：

var header = document.getElementsByClassName("white-header")
    console.log(header)
    var headerHeight = header.offsetHeight;
    console.log(headerHeight);

第一个 console.log 可以正常工作并向我显示标题。第二个说“未定义”。

标签： javascripthtmldomundefined

Answer 1

getElementsByClassName返回一个数组，您需要选择第一个元素。

var header = document.getElementsByClassName("white-header")
    console.log(header)
    var headerHeight = header[0].offsetHeight;
    console.log(headerHeight);

    <header class="white-header">
        <h1>something - <span class="orange">more</span></h1>
        <nav id="head-nav">
            <button>whatever</button>
            <a href="">LOGIN</a>
        </nav>
    </header>