Question

我正在为学校比赛设置一个网页，我想编写一些代码，当鼠标悬停在页脚上时，它将扩展为全屏显示。

我已经编写了代码，但是JavaScript .getElementById()函数之一无法找到ID为foot的页脚。

const footer = document.getElementById("foot");


footer.addEventListener("mouseenter", fullscreen);
footer.addEventListener("mouseleave", original);


function fullscreen() {
    footer.classList.add("fullscreen");
    footer.classList.remove("original");
}

function original() {
    footer.classList.add("original");
    footer.classList.remove("fullscreen");
}

@keyframes fullscreen {
    from {height: 10vh};
    to {height: 100vh};
}

@keyframes original {
    from {height: 100vh};
    to{height: 10vh};
}

.fullscreen {
    animation-name: fullscreen;
    animation-duration: 1500ms;
}

.original {
    animation-name: original;
    animation-duration: 1500ms;
}

<!DOCTYPE HTML>
<html>
  <head>
  </head>
  <body>
    <footer id="foot">
      <a href="#top"><h2>Let's Go</h2></a>
    </footer>
  </body>
</html>

.getElementById在文档中找不到ID

0 个答案: