无法获得 Header 的高度

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 正常工作并向我展示了 header。第二个说“未定义”。

Answer 1

getElementsByClassNamereturns一个数组，需要select第一个元素。

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>

Answer 2

document.getElementsByClassName用于定位多个元素，它会return一个节点数组，所以如果你使用class它就不起作用，解决这个问题的方法是你可以使用id 而不是像这样 class

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

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

Answer 3

你用过

document.getElement[s][1]ByClassName("white-header")

(注意s)

它有一个s，这意味着它将以多个元素为目标，而这个选择器returns是所有元素的一个数组与 (class="white-header") 匹配的元素s 并且数组没有定义“offsetHeight”=> undefined..

您可以使用其他选择器，或者只获取 [0] 并在其上执行操作

var header = document.getElementsByClassName("white-header")[0];

无法获得 Header 的高度

Cant get Height of Header

html

javascript

dom

undefined