时间戳

首页 > 解决方案 > 未捕获的类型错误：无法在 HTMLUListElement 处读取 null 的属性“样式”。

javascript - 未捕获的类型错误：无法在 HTMLUListElement 处读取 null 的属性“样式”。

问题描述

我正在尝试创建一个导航栏，单击该导航栏会影响其他元素的显示（无/可见），对于列表，背景可以根据代码出现，但对于影响通用、统计和关于类的代码，错误显示为在标题中，请帮助。
对不起，如果英语不好

let generic = document.querySelector(".generic");
let statistics = document.querySelector(".statistics");
let about = document.querySelector(".aboutMe");
let li = document.querySelectorAll("li");

let parentlist = document.getElementById("parent-list");

// locate your element and add the Click Event Listener
parentlist.addEventListener("click",function(e) {

    const target = e.target;
            

    // e.target is our targetted element.
    if(target.id == "genericnav") {
        target.style.backgroundColor = "lightgrey";
        generic.style.display = "visible";
        statistics.style.display = "none";
        about.style.display = "none";
    }

    else if(target.id == "statisticsnav") {
        target.style.backgroundColor = "lightgrey";
        generic.style.display = "none";
        statistics.style.display = "visible";
        about.style.display = "none";
    }

    else if(target.id == "aboutnav") {
        target.style.backgroundColor = "lightgrey";
        generic.style.display = "none";
        statistics.style.display = "none";
        about.style.display = "visible";
    }
            
});
@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');

body {
    font-family: 'Ubuntu', sans-serif;
    padding: 0;
    margin: 0;
}

header {
    display: flex;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
    width: 100%;
    background-color: white;
}

.logo {
    padding-left: 5%;
    font-size: 28px;
    flex-basis: 33%;
    line-height: 70px;
}

ul {
    margin: 0;
    padding: 0;
    flex-basis: 33%;
    border-bottom: 1px solid white;
    text-align: center;
    display: flex;
    width: 100%;
}

ul li {
    list-style-type: none;
    flex-direction: row;
    line-height: 450%;
    flex-grow: 1;
    border-bottom: 1px solid transparent;
}

ul li:hover {
    border-bottom: 1px solid black;
    cursor: pointer;
}
.dark-mode {
    flex-basis: 33%;
    line-height: 450%;
    text-align: right;
    padding-right: 5%;
}

.switch {
    position: relative;
    display: inline-block;
    width: 43px;
    height: 21px;
    transform: translateY(25px);
  }
  
  .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

.generic {
  display: visible;
}

.statistics {
  display: none;
}

.aboutMe {
  display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Covid-19</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="logo">
            Covid-19
        </div>
         
        <ul id="parent-list">
            <li id="genericnav">Generic</li>
            <li id="statisticsnav">Statistics</li>
            <li id="aboutnav">About Me</li>
        </ul>
        

        <div class="dark-mode">Night
            <label class="switch">
                <input type="checkbox">
                <span class="slider round"></span>
            </label>
        </div>
    </header>

    <div class="main">



        <div class="generic">
            <p>generic</p>
        </div>


        <div class="statistics">
          <p>statistics</p>
        </div>


        <div class="aboutMe">
          <p>about</p>        
        </div>
    </div>



    <script src="/script.js"></script>
</body>
</html>

标签： javascripthtmlcss

解决方案

推荐阅读