javascript 未捕获的类型错误：无法读取 null 的属性“offsetTop”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52532543/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught TypeError: Cannot read property 'offsetTop' of null
提问by Dpka
I am using HTML, CSS and JavaScript to create a web page with a sticky and responsive navigation bar. I created the responsive navigation bar and am trying to make it sticky as well. The issue is that it's not sticky and shows error: Uncaught TypeError: Cannot read property 'offsetTop' of null
我正在使用 HTML、CSS 和 JavaScript 创建一个带有粘性和响应式导航栏的网页。我创建了响应式导航栏，并试图使其具有粘性。问题是它不粘并显示错误：Uncaught TypeError: Cannot read property 'offsetTop' of null
HTML code:
HTML代码：
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#career">Careers</a>
<a href="#fellowship">About Us</a>
<a href="javascript:void(0);" class="icon" onclick="myFunctionForResponsive()">
<i class="fas fa-bars"></i>
</a>
</div>
JavaScript code:
JavaScript 代码：
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunctionForSticky()};
// Get the navbar
var navbar = document.getElementById("myTopnav");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position.
Remove "sticky" when you leave the scroll position
function myFunctionForSticky() {
if(window.pageYOffset >= sticky){
console.log("window.pageYOffset >= sticky");
}
else{
console.log("Not window.pageYOffset >= sticky");
}
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
/*Toggle between adding and removing the "responsive" class to topnav
when the user clicks on the icon*/
function myFunctionForResponsive() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
If I am taking class instead of id then it's showing the error: Uncaught TypeError: Cannot read property 'remove' of undefined
如果我正在上课而不是 id 那么它会显示错误：未捕获的类型错误：无法读取未定义的属性“删除”
回答by connexo
Code that wants to access the DOM needs to be wrapped in an event listener that listens on DOMContentLoaded.
想要访问 DOM 的代码需要封装在侦听 的事件侦听器中DOMContentLoaded。
Currently you are trying to access the element with the id myTopnavwhen the browser hasn't parsed the HTML yet, which means your document.getElementById("myTopnav");returns null. In the next line of code you are trying to read the offsetTopproperty of the nullthat your document.getElementById("myTopnav")returned, resulting in Cannot read property 'offsetTop' of null.
当前，myTopnav当浏览器尚未解析 HTML 时，您正尝试使用 id 访问元素，这意味着您的document.getElementById("myTopnav");返回null. 在下一行代码，你想读offsetTop的财产null，你document.getElementById("myTopnav")回来了，从而导致Cannot read property 'offsetTop' of null。
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
document.addEventListener('DOMContentLoaded', function() {
// When the event DOMContentLoaded occurs, it is safe to access the DOM
// When the user scrolls the page, execute myFunction
window.addEventListener('scroll', myFunctionForSticky);
// Get the navbar
var navbar = document.getElementById("myTopnav");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position.
// Remove "sticky" when you leave the scroll position
function myFunctionForSticky() {
if (window.pageYOffset >= sticky) {
console.log("window.pageYOffset >= sticky");
} else {
console.log("Not window.pageYOffset >= sticky");
}
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
/*Toggle between adding and removing the "responsive" class to topnav
when the user clicks on the icon*/
function myFunctionForResponsive() {
navbar.classList.toggle('responsive');
}
})
回答by Chamin Thilakarathne
some DOM element don't have this 'offsetTop' property check the existence before use. elements have this property
某些 DOM 元素没有这个 'offsetTop' 属性，请在使用前检查是否存在。元素有这个属性
