首页 > 解决方案 > .getElementById 在文档中找不到 id

问题描述

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

我已经编写了代码,但是其中一个 JavaScript.getElementById()函数无法使用 id 脚找到我的页脚。

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>

标签: javascripthtmlcss

解决方案


推荐阅读