html 组件 visible/invisible

Question

我需要隐藏一个组件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>

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

Answer 1

您正在使用 getElementById，但您的元素没有 ID - 它有一个 class。您还需要在 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>

Answer 2

“hid”是一个class，所以你不能select它和getElementById()。您应该为该元素添加唯一 ID。

另一种方法是 select by class 和 getElementsByClass()，其中 returns 所有元素都定义了 class，因此您需要找到正确的元素。

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

CSS

.hid {display: none;}

JS

<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>

html 组件 visible/invisible

html component visible/invisible

html

components

hide