Javascript实现onclick隐藏div

在网页开发中常常需要实现点击某个元素隐藏其他元素的功能。通过Javascript语言，我们可以很容易地实现这一点。

Html代码

我们先来看一下需要隐藏的div元素的Html代码：

<div id="hideMe">Hello World!</div>

其中，id属性为hideMe，我们将通过Javascript来隐藏它。

Javascript代码

我们使用onclick事件来绑定一个函数hide()，该函数可以在点击按钮时隐藏div元素。

function hide() {
  var x = document.getElementById("hideMe");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

我们首先使用document.getElementById()方法获取div元素，然后使用style.display属性控制它的显示与隐藏。当点击按钮时，判断div元素是否为隐藏状态，如果是，则将其设置为显示状态；如果不是，则将其设置为隐藏状态。

Html按钮代码

我们还需添加一个按钮元素，用以触发hide()函数：

<button onclick="hide()">Hide Me!</button>

在按钮元素上绑定了onclick事件，当点击该按钮时，会执行hide()函数，实现div元素的隐藏。

示例

综合以上代码，我们得到以下完整的Html代码片段。

<div id="hideMe">Hello World!</div>
<button onclick="hide()">Hide Me!</button>

<script>
function hide() {
  var x = document.getElementById("hideMe");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

以上代码可在任意Html页面中使用，点击按钮即可隐藏已定义的div元素。