javascript - 如何在javascript中选择元素

Question

JavaScript 新手。我试图让一个标题元素在向下滚动时消失，并在向上滚动时出现。

为什么不选择<header>元素？

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementsByTagName("header").style.top = "0";
  } else {
    document.getElementsByTagName("header").style.top = "-72px";
  }
  prevScrollpos = currentScrollPos;
} 


header {
    height: 72px;
    background-color: red;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: top 0.2s ease-in-out;
    z-index: 200;
}

但是，如果我向其中添加一个 ID，<header>我可以使用以下命令选择它

document.getElementById("导航栏")

标签： javascriptcss

Answer 1

.getElementsByTagName()返回一个类似于数组的 HTMLCollection。你需要这样做：

document.getElementsByTagName("header")[0].style.top = "0";

或使用.querySelector()接受 CSS 选择器并返回匹配的第一个元素：

document.querySelector("header").style.top = "0";