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>

但不起作用。页面启动时我需要tyo hide组件，当我在显示页面时按下按钮时显示组件。

Answer 1

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

＆＃13;

#hid {
  display: none;
}

＆＃13;

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

＆＃13;

Answer 2

＆＃34; hid＆＃34;是一个类，因此您无法使用getElementById()选择它。您应该为该元素添加唯一ID。

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

正如Turnip所说，你需要do_change之后的括号，因为它的功能。我猜那课＃34; hid＆＃34;应该隐藏具有该类的所有元素。这是对的。通过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组件可见/不可见

2 个答案: