Question

继续收到“无法读取 null 的属性样式”错误

2019-10-28

139

javascript html css

我正在开发自己的网站，但还不擅长编写代码。当我向下滚动时，我希望显示导航栏的其他内容，而当我在顶部时，显示原始导航栏。我希望使用纯 JavaScript 完成此操作，不使用任何库或框架。请参阅下面的代码，我知道代码没有组织。我稍后会这样做。


    var nav = document.querySelector("nav");
var hide = document.querySelector(".hide");
var appear = document.querySelector(".appear")

window.onscroll = function(){
    if(document.body.scrollTop > 70){
        hide.style.display = "block";
        appear.style.display = "none"
    } else {
        hide.style.display = "none";
        appear.style.display = "block"
    }
}


    nav{
    list-style-type: none;
    text-align: center;
    background-color: #3FA9A5;
    position: sticky;
    top: 0;
}

.hide{
    font-size: 70px;
    font-family: 'Long Cang', cursive;
    display: block;
}
.appear{
    height: 70px;
    display: none;
}

.appear img{
    width: 210px;

}

ul{
    margin: 0 auto;
    padding: 0;
}

body{
    margin: 0;
}

.container{
    max-width: 1080px;
    width: 95%;
    margin: 10px auto;
    display: grid;
    grid-template-columns: 25% 50% 25%;

}


.text{
    text-align: center;
}


.profile {
    border: 1px solid black;
    padding: 0 10px 20px 10px;

}

#main{
    width: 100%;
}

.post{
    margin-left: 4.165%;
}

#image{
    width: 100%;
}

#post-divide{
    margin-left: 10px;
    margin-right: 10px;
}

.comments{
    width: 100%;
    margin-top: 68.5px;
    padding-bottom: 293.5px;
    border: 1px solid black;
}
 h2{
    text-align: center;
 }

 .center{
    grid-column: 2;
 }


        <link rel="stylesheet" type="text/css" href="test.css">
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Long+Cang&display=swap" rel="stylesheet">
    <title>test</title>
</head>
<body>
<nav>
    <ul>
        <li class="hide">Unknown</li>
        <li class="appear"><img src="cat.png"></li>
    </ul>
</nav>

<div class="container">

        <div class="col-1">
            <div class="profile text">
                <img id="main" src="https://data.whicdn.com/images/86629641/superthumb.jpg?t=1384568664">
                <hr>
                <p>12 posts</p>
                <p>instagram</p>
                <button>Subscribe!</button>
            </div>
        </div>

        <div class="col-1">
            <div class="post">
                <h2>TITLE</h2>
                <div>
                    <img id="image" src="https://i.pinimg.com/originals/76/d4/8c/76d48cb2928845dfcfab697ac7cbcf1c.jpg">
                </div>
                <hr id="post-divide">
            </div>
        </div>

        <div class="col-1">
            <div class="comments text"></div>
        </div>

        <div class="col-1 center">
            <div class="post">
                <h2>TITLE</h2>
                <div>
                    <img id="image" src="https://i.pinimg.com/originals/76/d4/8c/76d48cb2928845dfcfab697ac7cbcf1c.jpg">
                </div>
                <hr id="post-divide">
            </div>
        </div>

        <div class="col-1">
            <div class="comments text"></div>
        </div>
</div>

我想我应该在 JS 代码中添加一些内容，但不知道为什么如果您能告诉我如何编写 HTML/CSS 代码，这样我就不必创建 2 个导航栏（如果可能的话），我将不胜感激

Answer 1

以下指令：

document.querySelector("hide");

将查询类似以下元素：

<hide></hide>

由于没有前缀的普通选择器（ div 、 header 、 span ）将查询整个元素标签，而不是类或属性。

也许您想使用 . 来查询类：

document.querySelector(".hide");

Answer 2

var hide = document.querySelector(".hide");
var appear = document.querySelector(".appear")

因此您应该使用类选择器

Answer 3

您使用“hide”和“appear”作为选择器，但它们并不存在于您的 HTML 中。

在您的 querySelector 中使用“.hide”和“.appear”。

 var hide = document.querySelector(".hide"); 
 var appear = document.querySelector(".appear");