Javascript querySelector甚至不能处理我在html文件末尾的脚本。
Javascript querySelector甚至不能处理我在html文件末尾的脚本。
提问于 2020-01-06 06:38:28
我正在学习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:16index.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>style.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);
}app.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);
});回答 1
Stack Overflow用户
发布于 2020-01-08 10:06:39
我也有同样的问题，即使我确保div“冒泡”在那里(HTML文件)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59604831
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号