html 组件可见/不可见答案

【问题标题】：html component visible/invisiblehtml 组件可见/不可见
【发布时间】：2017-02-26 10:03:31
【问题描述】：

我需要隐藏一个组件html：

<div class="hid" >
  <select >
    <option value="M">Male</option>
    <option value="F">Female</option>
  </select>
</div>

我将这段代码放入样式标签中：

.hid{ display: none;}

它起作用了：组件是隐藏的。

现在我需要通过按钮使组件可见，并输入以下代码：

<script type="text/javascript">    
   function do_change(){ 
     document.getElementById("hid").style.display = "block";
   }
</script>

<button onclick="do_change">edit</button>

但不起作用。我需要在页面启动时隐藏组件，并在单击显示页面的按钮时显示组件。

【问题讨论】：

标签： html components hide

【解决方案1】：

您正在使用getElementById，但您的元素没有 id - 它有一个类。您还需要在 onclick 中使用大括号来运行 do_change 函数。

#hid {
  display: none;
}

<script type="text/javascript">
  function do_change() {
    document.getElementById("hid").style.display = "block";
  }
</script>

<button onclick="do_change()">edit</button>

<div id="hid">
  <select>
    <option value="M">Male</option>
    <option value="F">Female</option>
  </select>
</div>

【讨论】：

【解决方案2】：

“hid”是一个类，所以不能用getElementById() 选择它。您应该为该元素添加唯一 ID。

另一种方法是使用getElementsByClass()按类选择，它返回具有定义类的所有元素，因此您需要找到正确的元素。

正如萝卜所说，do_change 之后需要括号，因为它是函数。我猜想“hid”这个类应该隐藏所有具有该类的元素。这是正确的。按 id 选择更容易，所以我只需将唯一的 id 添加到元素，如id="gender"。然后代码看起来像：

CSS

.hid {display: none;}

<script type="text/javascript">
    function do_change(){ 
      document.getElementById("gender").style.display = "block";
    }
</script>

HTML

<div id="gender" class="hid" >
    <select >
        <option value="M">Male</option>
        <option value="F">Female</option>
    </select>
</div>

<button onclick="do_change()">edit</button>

【讨论】：