如何通过JS编程绑定onclick事件实现元素隐藏（非内联写法）

先看你给出的代码片段：

<button id="button1">Button</button>
<script>
document.getElementById("button1").onclick = function(){ 
  ???.style.display="none" 
}; 
</script>

你已经选对了非内联的事件绑定方式，只需要把???替换成你要隐藏的元素的DOM对象就行，分两种常见场景：

场景1：点击按钮后隐藏按钮自身 #

在onclick的回调函数里，this会指向触发点击事件的按钮元素，直接用this就能操作按钮本身：

<button id="button1">点击我隐藏自己</button>
<script>
document.getElementById("button1").onclick = function(){
  this.style.display = "none";
};
</script>

场景2：点击按钮隐藏页面上的另一个元素 #

如果要隐藏的是其他元素（比如一个id为targetBox的div），先通过document.getElementById()获取该元素的DOM对象，再修改它的样式：

<button id="button1">点击隐藏下方盒子</button>
<div id="targetBox">我是要被隐藏的内容</div>
<script>
document.getElementById("button1").onclick = function(){
  // 获取目标元素
  const target = document.getElementById("targetBox");
  // 设置display为none隐藏它
  target.style.display = "none";
};
</script>

更推荐的做法：用CSS类控制隐藏 #

直接修改元素的style属性虽然简单，但如果以后要调整隐藏的样式（比如改成visibility: hidden），就得改JS代码。更灵活的方式是定义一个CSS类，然后通过JS给元素添加这个类：

/* 先定义隐藏类 */
.hidden {
  display: none;
}

<button id="button1">点击隐藏目标</button>
<div id="targetBox">我是要被隐藏的内容</div>
<script>
document.getElementById("button1").onclick = function(){
  document.getElementById("targetBox").classList.add("hidden");
};
</script>

这样以后要修改隐藏逻辑，只需要调整CSS类的样式即可，代码更易维护。

内容的提问来源于stack exchange，提问作者Ma Dude