javascript - 即使在 html 文件末尾使用我的脚本，Javascript querySelector 也无法正常工作

问题描述

我正在学习 javascript，并以此 youtube 视频为例： https ://www.youtube.com/watch?v=RLc8NB2JyxE& 他不包含源代码，但我确保我的代码与视频。本教程介绍了如何使用 html、css 和 javascript 来制作一个随着您向下滚动屏幕而变化的导航栏。我能找到的这个错误的任何示例都有一个“将脚本放在 html 正文的末尾”的解决方案，但我的已经在那里，我不确定为什么脚本没有加载。

这是错误：

app.js:28 Uncaught TypeError: Cannot read property 'style' of null
    at app.js:28
    at Array.forEach (<anonymous>)
    at IntersectionObserver.navCheck (app.js:16)
(anonymous) @ app.js:28
navCheck @ app.js:16

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./style.css" />
    <title>PhotoGem | slogan here</title>
  </head>
  <body>
    <header>
      <nav>
        <h1>PhotoGem</h1>
        <ul>
          <li><a data-page="home" href="#">Home</a></li>
          <li><a data-page="project" href="#">Project</a></li>
          <li><a data-page="contact" href="#">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section data-index="0" class="home">
        <h2>Home</h2>
      </section>
      <section data-index="1" class="project">
        <h2>Projects</h2>
      </section>
      <section data-index="2" class="contact">
        <h2>Contact</h2>
      </section>
    </main>
    <script src="./app.js"></script>
  </body>
</html>

样式.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
}
header {
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
  position: sticky;
  top: 0px;
  background: white;
}
nav {
  min-height: 10vh;
  margin: auto;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
nav h1,
nav ul {
  font-size: 1.5rem;
  flex: 1;
}
nav ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
}
nav a {
  color: black;
  text-decoration: none;
}
section {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
section h2 {
  font-size: 5rem;
  color: white;
}

.home {
  background: linear-gradient(to right top, #f46b45, #eea849);
}

.project {
  background: linear-gradient(to right top, #005c97, #363795);
}
.contact {
  background: linear-gradient(to right top, #e53935, #e35d5b);
}

.bubble {
  position: absolute;
  z-index: -2;
  background: linear-gradient(to right top orange, yellow);
}

应用程序.js

const sections = document.querySelectorAll("section");
const bubble = document.querySelector(".bubble");
const gradients = [
  "linear-gradients(to right top, #f46b45, #eea849)",
  "linear-gradients(to right top, #005c97, #363795)",
  "linear-gradients(to right top, #e53935, #e35d5b)"
];

const options = {
  threshold: 0.7
};

let observer = new IntersectionObserver(navCheck, options);

function navCheck(entries) {
  entries.forEach(entry => {
    const className = entry.target.className;
    const activeAnchor = document.querySelector(`[data-page=${className}]`);
    const gradientIndex = entry.target.getAttribute("data-index");
    const coords = activeAnchor.getBoundingClientRect();
    const directions = {
      height: coords.height,
      width: coords.width,
      top: coords.top,
      left: coords.left
    };
    if (entry.isIntersecting) {
      bubble.style.setProperty("left", `${directions.left}px`);
      bubble.style.setProperty("top", `${directions.top}px`);
      bubble.style.setProperty("width", `${directions.width}px`);
      bubble.style.setProperty("height", `${directions.height}px`);
    }
  });
}

sections.forEach(section => {
  observer.observe(section);
});

标签： javascripthtmlcss

javascript - 即使在 html 文件末尾使用我的脚本，Javascript querySelector 也无法正常工作

问题描述

解决方案

推荐阅读