为什么会说“无法读取 null 的属性（读取‘样式’）”

问题描述 投票：0回答：1

我正在制作一个博客网站。我正在使其响应式，并且我也使其响应式。但是导航栏不起作用。我认为问题出在 Javascript 上 请帮助我....

我上去检查控制台。它向我显示了“未捕获的类型错误：无法读取 null 的属性（读取“样式”） 在 HTMLButtonElement.openNav" 。我在 youtube 上查找并堆栈溢出，但没有任何效果。这是我的代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body>
    <nav>
        <div class="container nav_container">
            <a href="index .html" class="nav_logo">blog</a>
            <ul class="nav_items">
                <li><a href="blog.html">Blog</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="signin.html">Sign in</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li class="nav_profile">
                    <div class="avatar">
                        <img src="./images/person_FILL0_wght400_GRAD0_opsz24.png" alt="">
                    </div>
                    <ul>
                        <li><a href="dashboard.html">Dashboard</a></li>
                        <li><a href="logout.html">Dashboard</a></li>
                    </ul>
                </li>
            </ul>
            <button id="open_nav-btn"><i class="uil uil-bars"></i></button>
            <button id="close_nav-btn"><i class="uil uil-multiply"></i></button>
        </div>
    </nav>
<!------------------------------NAV END---------------------------------->

<!------------------------------FEATURED---------------------------------->
<section class="featured">
    <div class="container featured_container post">
        <div class="post_thumbnail">
            <img src="./images/pintrest.jpg" alt="">
        </div>
        <div class="post_info">
            <a href="" class="category_button">Wild Life</a>
            <h2 class="post_title"><a href="post.html">Lorem ipsum dolor, sit amet consectetur 
                adipisicing elit.</a></h2>
            <p class="post_body">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Ipsum labore fuga repellendus.
            </p>
            <div class="post_author">
                <div class="post_author-avatar">
                    <img src="./images/person_FILL0_wght400_GRAD0_opsz24.png" alt="">
                </div>
                <div class="post_author-info">
                    <h5>By: JebaJeevan</h5>
                    <small>December,30,2023 - 07:23</small>
                </div>
            </div>
        </div>
    </div>
</section>

<!------------------------------FEATURED END---------------------------------->
<section class="posts">
    <div class="container post_container">
        <article class="post">
            <div class="post_thumbnail">
                <img src="./images/pintrest.jpg" >
            </div>
            <div class="post_info">
                <a href="" class="category_button">Wild Life</a>
                <h3 class="post_title">
                    <a href="post.html">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, voluptatem.</a>
                </h3>
                <p class="post_body">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam optio, hic quibusdam eveniet animi aliquid soluta, aut totam alias 
                </p>
                <div class="post_author">
                    <div class="post_avatar-avatar">
                        <img src="./images/person_FILL0_wght400_GRAD0_opsz24.png" alt="">
                    </div>
                    <div class="post_author-info">
                        <h5>By:Koala Man</h5>
                        <small>January 06 2024 - 2:21pm</small>
                    </div>
                </div>
            </div>
        </article>
        <article class="post">
            <div class="post_thumbnail">
                <img src="./images/pintrest.jpg" >
            </div>
            <div class="post_info">
                <a href="" class="category_button">Wild Life</a>
                <h3 class="post_title">
                    <a href="post.html">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, voluptatem.</a>
                </h3>
                <p class="post_body">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam optio, hic quibusdam eveniet animi aliquid soluta, aut totam alias 
                </p>
                <div class="post_author">
                    <div class="post_avatar-avatar">
                        <img src="./images/person_FILL0_wght400_GRAD0_opsz24.png" alt="">
                    </div>
                    <div class="post_author-info">
                        <h5>By:Koala Man</h5>
                        <small>January 06 2024 - 2:21pm</small>
                    </div>
                </div>
            </div>
        </article>
        <article class="post">
            <div class="post_thumbnail">
                <img src="./images/pintrest.jpg" >
            </div>
            <div class="post_info">
                <a href="" class="category_button">Wild Life</a>
                <h3 class="post_title">
                    <a href="post.html">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, voluptatem.</a>
                </h3>
                <p class="post_body">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam optio, hic quibusdam eveniet animi aliquid soluta, aut totam alias 
                </p>
                <div class="post_author">
                    <div class="post_avatar-avatar">
                        <img src="./images/person_FILL0_wght400_GRAD0_opsz24.png" alt="">
                    </div>
                    <div class="post_author-info">
                        <h5>By:Koala Man</h5>
                        <small>January 06 2024 - 2:21pm</small>
                    </div>
                </div>
            </div>
        </article>
        <article class="post">
            <div class="post_thumbnail">
                <img src="./images/pintrest.jpg" >
            </div>
            <div class="post_info">
                <a href="" class="category_button">Wild Life</a>
                <h3 class="post_title">
                    <a href="post.html">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, voluptatem.</a>
                </h3>
                <p class="post_body">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam optio, hic quibusdam eveniet animi aliquid soluta, aut totam alias 
                </p>
                <div class="post_author">
                    <div class="post_avatar-avatar">
                        <img src="./images/person_FILL0_wght400_GRAD0_opsz24.png" alt="">
                    </div>
                    <div class="post_author-info">
                        <h5>By:Koala Man</h5>
                        <small>January 06 2024 - 2:21pm</small>
                    </div>
                </div>
            </div>
        </article>
        <article class="post">
            <div class="post_thumbnail">
                <img src="./images/pintrest.jpg" >
            </div>
            <div class="post_info">
                <a href="" class="category_button">Wild Life</a>
                <h3 class="post_title">
                    <a href="post.html">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, voluptatem.</a>
                </h3>
                <p class="post_body">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam optio, hic quibusdam eveniet animi aliquid soluta, aut totam alias 
                </p>
                <div class="post_author">
                    <div class="post_avatar-avatar">
                        <img src="./images/person_FILL0_wght400_GRAD0_opsz24.png" alt="">
                    </div>
                    <div class="post_author-info">
                        <h5>By:Koala Man</h5>
                        <small>January 06 2024 - 2:21pm</small>
                    </div>
                </div>
            </div>
        </article>
        <article class="post">
            <div class="post_thumbnail">
                <img src="./images/pintrest.jpg" >
            </div>
            <div class="post_info">
                <a href="" class="category_button">Wild Life</a>
                <h3 class="post_title">
                    <a href="post.html">Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, voluptatem.</a>
                </h3>
                <p class="post_body">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam optio, hic quibusdam eveniet animi aliquid soluta, aut totam alias 
                </p>
                <div class="post_author">
                    <div class="post_avatar-avatar">
                        <img src="./images/person_FILL0_wght400_GRAD0_opsz24.png" alt="">
                    </div>
                    <div class="post_author-info">
                        <h5>By:Koala Man</h5>
                        <small>January 06 2024 - 2:21pm</small>
                    </div>
                </div>
            </div>
        </article>
    </div>
</section>
<!------------------------------POSTS END---------------------------------->

<section class="category_buttons">
     <div class="container category_buttons-container">
        <a href="" class="category_button">Art</a>
        <a href="" class="category_button">Wild Life</a>
        <a href="" class="category_button">Best</a>
        <a href="" class="category_button">Funny</a>
        <a href="" class="category_button">Useful</a>
        <a href="" class="category_button">DIY</a>
     </div>
</section>
<!------------------------------CB END---------------------------------->


<footer>
    <div class="footer_socials">
        <a href="https://www.youtube.com/@EGATORTUTORIALS" target="_blank"><i class="uil uil-youtube">
        </i></a>
        <a href="https://www.youtube.com/@EGATORTUTORIALS" target="_blank"><i class="uil uil-facebook-f">
        </i></a>
        <a href="https://www.youtube.com/@EGATORTUTORIALS" target="_blank"><i class="uil uil-twitter">
        </i></a>
        <a href="https://www.youtube.com/@EGATORTUTORIALS" target="_blank"><i class="uil uil-instagram">
        </i></a>
    </div>
    <div class="container footer_container">
        <article>
            <h4>Categories</h4>
            <ul>
                <li><a href="">Art</a></li>
                <li><a href="">Music</a></li>
                <li><a href="">Business</a></li>
                <li><a href="">Car</a></li>
                <li><a href="">Call</a></li>
                <li><a href="">Road</a></li>
            </ul>
        </article>
        <article>
            <h4>Support</h4>
            <ul>
                <li><a href="">Online Support</a></li>
                <li><a href="">Location</a></li>
                <li><a href="">Email</a></li>
                <li><a href="">Social Support</a></li>
                <li><a href="">Call</a></li>
            </ul>
        </article>
        <article>
            <h4>Blog</h4>
            <ul>
                <li><a href="">Safety</a></li>
                <li><a href="">repair</a></li>
                <li><a href="">Popular</a></li>
                <li><a href="">Recent</a></li>
                <li><a href="">Categories</a></li>
            </ul>
        </article>
        <article>
            <h4>Permalinks</h4>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </article>
    </div>
</footer>
   <script src="main.js" defer></script>
</body>
</html>

CSS

:root{
  --color-primary:#6f6af8;
  --color-primary-light:hsl(242, 91%, 69%, 18%);
  --color-primary-variant:#5854c7;
  --color-red:#da0f3f;
  --color-red-light:hsl(346,87%,47%,15%);
  --color-green:#00c476;
  --color-green-light:hsl(156, 100%, 38%, 15%);
  --color-gray-900:#1e1e66;
  --color-gray-700:#2b2b7c;
  --color-gray-300:rgba(242, 242, 254, 0.3);
  --color-gray-200:rgba(242, 242, 254, 0.7);
  --color-white:#f2f2fe;
  --color-bg:#0f0f3e;

  --transition:all 300ms ease ;

  --container-width-lg:74%;
  --container-width-md:88%;
  --form-width:40%;

  --card-border-radius-1:0.3rem;
  --card-border-radius-2:0.5rem;
  --card-border-radius-3:0.8rem;
  --card-border-radius-4:2rem;
  --card-border-radius-5:5rem;
}
/*==========GENERAL==========*/
*{
  margin:0;
  padding: 0;
  outline: 0;
  border: 0;
  appearance: 0;
  list-style: none;
  text-decoration: none;
}

body{
  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
  color: var(--color-gray-200);
  overflow-x: hidden;
  background: var(--color-bg);
  font-size: 0.9rem;
}

.container{
  width: var(--container-width-lg);
  max-width: 1800px;
  margin-inline: auto;
}

section{
  margin-top: 3rem;
  width: 100vw;
}

h1,h2,h3,h4,h5{
  color: var(--color-white);
  line-height: 1.3;
}

h1{
  font-size: 3rem;
  margin: 1rem 0;
}

h2{
  font-size: 1rem;
  margin: 1rem 0;
}

h3{
  font-size: 0.9rem;
  margin: 0.8rem 0 0.5rem;
}

h4{
  font-size: 1rem;
}

a{
  color: var(--color-white);
  transition: var(--transition);
}
img{
  display: block;
  width: 100%;
  object-fit: cover;
}


/*==========NAV==========*/

nav{
  background: var(--color-primary);
  width: 100vw;
  height: 4.5rem;
  position: fixed;
  top: 0;
  z-index: 10;
  box-shadow: 0  1rem 1rem rgba(0, 0, 0, 0.2);
}
nav button{
  display: none ;
}
.nav_container{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.avatar{
  width: 2.5rem;
  aspect-ratio: 1/1;
  height: 2.5rem;
  border-radius: 50%;
  overflow: hidden;
  border: 0.3rem solid var(--color-bg);
}
.nav_logo{
  font-weight: 600;
  font-size: 1.2rem;
}
.nav_items{
  display: flex;
  align-items: center;
  gap: 4rem;
}
.nav_profile{
  position: relative;
  cursor: pointer;
}
.nav_profile ul{
  position: absolute;
  top: 125%;
  right: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 3rem 3rem rgba(0, 0, 0, 0.4);
  visibility: hidden;
  opacity: 0;
  transition: var(--transition);
}
/*show nav ul when nav profile is hovered*/
.nav_profile:hover > ul{
  visibility: visible;
  opacity: 1;
}
.nav_profile ul li a{
  padding: 1rem;
  background: var(--color-gray-900);
  display: block;
  width: 100%;
}
.nav_profile ul li:last-child a{
  background: var(--color-red);
  color: var(--color-bg);
}
/*==========CATEGORY BUTTON==========*/

.category_button{
  background: var(--color-primary-light);
  color: var(--color-primary);
  padding: 0.5rem 1rem;
  border-radius: var(--card-border-radius-2);
  font-weight: 600;
  font-size: 0.8rem;
  text-align: center;
}
.category_button:hover{
  color: var(--color-white);
}
/*==========GENERAL POST==========*/

.post_thumbnail{
  border-radius: 3rem 0rem;
  border-color: #f2f2fe;
  overflow: hidden;
  margin-bottom: 1.6rem;
}
.post_author{
  display: flex;
  gap: 1rem;
  margin-top: 1.2rem;
}
.post_author-avatar{
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--card-border-radius-2);
  overflow: hidden;
}
/*==========FEATURED==========*/
.featured{
  margin-top: 8rem;
}
.featured_container{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}
.featured .post_thumbnail{
  height: fit-content;
}


/*==========POST==========*/

.post_container{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 5rem;
  margin-bottom: 5rem;
}

/*==========CATEGORY BUTTON==========*/

.category_buttons{
  padding: 4rem 0rem;
  border-top: 2px solid var(--color-gray-900);
  border-bottom: 2px solid var(--color-gray-900);

}
.category_buttons-container{
  width: fit-content;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1rem;
}

/*==========FOOTER==========*/

footer{
  background: var(--color-gray-900);
  padding: 5rem 0 0;
  box-shadow: inset 0rem 1.5rem 1.5rem rgba(0, 0, 0, 0.2);
}
.footer_socials{
  margin-inline: auto;
  width: fit-content;
  margin-bottom: 5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.2rem;
}
.footer_socials a{
  background: var(--color-bg);
  border-radius: 50%;
  width: 2.3rem;
  height: 2.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer_socials a:hover{
  background: var(--color-white);
  color: var(--color-bg);
}
.footer_container{
  display: grid;
  grid-template-columns: repeat(4,1fr);
}
footer h4{
  color: var(--color-white);
  margin-bottom: 0.6rem;
}
footer ul li{
  padding: 0.4rem 0;
}
footer ul a{
  opacity: 0.75;
}
footer ul a:hover{
  letter-spacing: 0.2rem;
  opacity: 1;
}
/*==========MEDIA QUERIES [MEDIUM DEVICES]==========*/
@media screen and (max-width:1024px) {
  /*==========GENERAL==========*/
    .container{
      width: var(--container-width-md);
    }

    h2{
      font-size: 1.6rem;
    }
    h3{
      font-size: 1.2rem;
    }
    h5{
      font-size: 0.8rem;
    }
  /*==========NAV==========*/
  nav button{
    display: inline-block;
    font-size: 1.5rem;
    background: transparent;
    color: var(--color-white);
    cursor: pointer;
  }
  nav button#close_nav-btn{
    display:none;
  }
  .nav_container{
    position: relative;
  }
  .nav_items{
    position: absolute;
    flex-direction: column;
    top: 100%;
    right: 0;
    width: 12rem;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    display: none;
  }
  .nav_items li{
    width: 100%;
    height: 4.5rem;
    display: flex;
    align-items: center;
    box-shadow: -2rem 3rem 7rem rgba(0, 0, 0, 0.8);
    border-top: 1px solid var(--color-bg);
  }
  .nav_items li a{
    border-radius: 0;
    width: 100%;
    height: 100%;
    background: var(--color-gray-900);
    padding: 0 2rem;
    display: flex;
    align-items: center;
  }

  .nav_profile{
    background: var(--color-gray-900);
  }

  .nav_profile ul{
    top: 100%;
    width: 100%;
  }

  .nav_profile .avatar{
    margin-left: 2rem;
    border: 0;
  }
}

js

const navItems = document.querySelector('nav_items');
const openNavBtn = document.querySelector('#open_nav-btn');
const closeNavBtn = document.querySelector('#close_nav-btn');

const openNav = () => {
    navItems.style.display = 'flex';
    openNavBtn.style.display = 'none';
    closeNavBtn.style.display = 'inline-block';
}
openNavBtn.addEventListener('click',openNav);
javascript html
1个回答
1
投票

您的选择器中似乎缺少一个点：

const navItems = document.querySelector('nav_items');

应该是 :

const navItems = document.querySelector('.nav_items');

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.