未捕获的类型错误：无法读取 null 的属性“样式”答案

【问题标题】：Uncaught TypeError: Cannot read property 'style' of null未捕获的类型错误：无法读取 null 的属性“样式”
【发布时间】：2017-02-09 17:28:07
【问题描述】：

我的代码似乎有一个我不知道如何解决的问题。我对这些东西非常陌生，几乎不知道我在做什么。每次我运行我的代码时，都会弹出这个错误。当您单击按钮时，我正在尝试使蓝色框消失。当您再次单击该按钮时，蓝色框会重新出现，而绿色框会消失。这是我的代码：

<script type="text/javascript">
   function toggle_visibility(id1,id2){
   var e1 = document.getElementById(id1);
   var e2 = document.getElementById(id2);

   if (e1.style.visibility == 'hidden') {
      e1.style.visibility = 'visible';
      e2.style.visibility = 'visible';}
      else{
      e1.style.visibility = 'hidden';
      e2.style.visibility = 'hidden';
      }
      }
</script>
<div class="square" id="bluebox" style="visibility:visible"></div><br>
<div class="box" id="greenbox" style="visibility:visbible"></div><br>
<button onclick=" toggle_visibility(greenbox,bluebox)">Pls Work</button>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

函数的参数需要加引号：

<button onclick="toggle_visibility('greenbox','bluebox')">Pls Work</button>

它们不是变量，它们是字符串。

【讨论】：

【解决方案2】：

你必须将两个元素的id's 作为字符串传递给函数。

function toggle_visibility(id1, id2) {
     var e1 = document.getElementById(id1);
     var e2 = document.getElementById(id2);

     if (e1.style.visibility == 'hidden') {
       e1.style.visibility = 'visible';
       e2.style.visibility = 'visible';
     } else {
       e1.style.visibility = 'hidden';
       e2.style.visibility = 'hidden';
     }
   }

.square, .box {
  height: 50px;
  width: 50px;
  visibility: hidden;
}

#greenbox {
  background-color: green;
}

#bluebox {
    background-color: blue;
}

<div class="square" id="bluebox"></div>
<br>
<div class="box" id="greenbox"></div>
<br>
<button onclick="toggle_visibility('bluebox', 'greenbox')">Pls Work</button>

【讨论】：

【解决方案3】：

参数id没有从HTML正确传递，需要像onclick="toggle_visibility('greenbox','bluebox')"一样正确传递ID

以下代码应该适合您。

   function toggle_visibility(id1,id2){
   var e1 = document.getElementById(id1);
   var e2 = document.getElementById(id2);

   if (e1.style.visibility == 'hidden') {
      e1.style.visibility = 'visible';
      e2.style.visibility = 'visible';}
      else{
      e1.style.visibility = 'hidden';
      e2.style.visibility = 'hidden';
      }
      }

<div class="square" id="bluebox" style="visibility:visible"></div><br>
<div class="box" id="greenbox" style="visibility:visbible"></div><br>
<button onclick="toggle_visibility('greenbox','bluebox')">Pls Work</button>

【讨论】：