错误：未被捕获的TypeError：无法读取null的属性“样式”

Question

出现此错误

错误：未被捕获的TypeError：无法读取null的属性“样式”

我不知道怎么了。我很确定我一切设置正确

var x = true;

function openNav() {
  if (x == true) {
    document.getElementById("mySidebar").style.width = "250px";
    x = false;
  } else {
    document.getElementById("mySidebar").style.width = "0";

  }

}

.sidenav {
  height: 100%;
  /* Full-height: remove this if you want "auto" height */
  width: 250px;
  /* Set the width of the sidebar */
  position: fixed;
  /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1;
  /* Stay on top */
  top: ;
  /* 0 to Stay at the top */
  left: 0;
  background-color: #1b1b1b;
  /* Black */
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 20px;
  transition: 0.5s;
  /* 0.5 second transition effect to slide in the sidebar */
}

<button class="openbtn" onclick="openNav()">&#9776; Toggle Sidebar</button>
<div id="mySidebar" class="sidenav">
  <a href="#">Auto &amp; Vehicale</a>
  <a href="#">Beuty &amp; Fashion</a>
  <a href="#">Comedy</a>
  <a href="#">Education</a>
  <a href="#">Entertainment</a>
  <a href="#">Film &amp; Animation</a>
  <a href="#">Food</a>
  <a href="#">Gaming</a>
  <a href="#">How-To</a>
  <a href="#">Music</a>
  <a href="#">News &amp; Politics</a>
  <a href="#">Nonprofits &amp; Activism</a>
  <a href="#">People &amp; Blogs</a>
  <a href="#">People &amp; Animals</a>
  <a href="#">Technology</a>
</div>

基本上，我想做的是使用“打开”按钮打开侧面导航，如果打开则也使用相同的按钮将其关闭。

Answer 1

根本上发生了什么事，那就是浏览器无法找到ID为“ mySidebar”的元素（因此，当您尝试访问style时出现错误“无法读取属性'style'为null”的错误...该元素的属性）。但是，该元素显然在HTML中存在，并且事件连接时间没有问题，因为您使用的是onclick属性。

换句话说，没有东西加起来。这里所有相关的是：

<button onclick="openNav()">&#9776; Toggle Sidebar</button>
<div id="mySidebar" ></div>

和：

function openNav() {
  console.log(document.getElementById("mySidebar"));
}

如果只是那样，单击按钮时应该会看到mySidebar记录下来，并且如果发生这种情况，那么就不会出现有关“无法读取null属性'style'的错误”（指的是{{1 }}为空）。

如果这样做，肯定有错字或我们看不到的东西。

Answer 2

使用close创建一个类width: 0px，可以使用对象的classList属性检查对象是否关闭或打开，方法是检查对象是否包含类close 。

function openNav(){
  let a = document.querySelector('#mySidebar')
  if(a.classList.contains('close')){
    a.classList.remove('close')
  }else{
    a.classList.add('close')
  }
}

.sidenav {
  height: 100%;
  /* Full-height: remove this if you want "auto" height */
  width: 250px;
  /* Set the width of the sidebar */
  position: fixed;
  /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1;
  /* Stay on top */
  top: ;
  /* 0 to Stay at the top */
  left: 0;
  background-color: #1b1b1b;
  /* Black */
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 20px;
  transition: 0.5s;
  /* 0.5 second transition effect to slide in the sidebar */
}
.close{
 width: 0px;
}

<button class="openbtn" onclick="openNav()">&#9776; Toggle Sidebar</button>
<div id="mySidebar" class="sidenav">
  <a href="#">Auto &amp; Vehicale</a>
  <a href="#">Beuty &amp; Fashion</a>
  <a href="#">Comedy</a>
  <a href="#">Education</a>
  <a href="#">Entertainment</a>
  <a href="#">Film &amp; Animation</a>
  <a href="#">Food</a>
  <a href="#">Gaming</a>
  <a href="#">How-To</a>
  <a href="#">Music</a>
  <a href="#">News &amp; Politics</a>
  <a href="#">Nonprofits &amp; Activism</a>
  <a href="#">People &amp; Blogs</a>
  <a href="#">People &amp; Animals</a>
  <a href="#">Technology</a>
</div>

Answer 3

您显示的代码没有您提到的错误。它的意思是document.getElementById('mySidebar')在您的HTML中找不到具有该id值的任何元素。

除此之外，为什么您的代码示例不会切换：

您需要反转 x 每次单击按钮。当前，您在false情况下将其设置为if，但从未在true情况下将其重新设置为else。

var x = true;

function openNav() {
  if (x == true) {
    document.getElementById("mySidebar").style.width = "250px";
  } else {
    document.getElementById("mySidebar").style.width = "0";
  }
  x = !x;
}

.sidenav {
  height: 100%;
  /* Full-height: remove this if you want "auto" height */
  width: 250px;
  /* Set the width of the sidebar */
  position: fixed;
  /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1;
  /* Stay on top */
  top: ;
  /* 0 to Stay at the top */
  left: 0;
  background-color: #1b1b1b;
  /* Black */
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 20px;
  transition: 0.5s;
  /* 0.5 second transition effect to slide in the sidebar */
}

<button class="openbtn" onclick="openNav()">&#9776; Toggle Sidebar</button>
<div id="mySidebar" class="sidenav">
  <a href="#">Auto &amp; Vehicale</a>
  <a href="#">Beuty &amp; Fashion</a>
  <a href="#">Comedy</a>
  <a href="#">Education</a>
  <a href="#">Entertainment</a>
  <a href="#">Film &amp; Animation</a>
  <a href="#">Food</a>
  <a href="#">Gaming</a>
  <a href="#">How-To</a>
  <a href="#">Music</a>
  <a href="#">News &amp; Politics</a>
  <a href="#">Nonprofits &amp; Activism</a>
  <a href="#">People &amp; Blogs</a>
  <a href="#">People &amp; Animals</a>
  <a href="#">Technology</a>
</div>