css 单击按钮隐藏图片

CSS单击按钮隐藏图片是一种很常见的网页设计技巧，下面我们来了解一下如何实现。

首先，我们需要一个HTML文件，其中包括一个按钮和一张图片：

!DOCTYPE html>
    html>
      head>
        title>
    CSS按钮隐藏图片/title>
        style>
          /* 样式代码 */    /style>
      /head>
      body>
        button class="hide-btn">
    隐藏图片/button>
        img src="pic.png" class="pic">
      /body>
    /html>
    

接下来，我们需要用CSS来隐藏图片。我们使用display: none; 属性来实现此功能。为了能够控制隐藏和显示图片，我们需要使用一个类，比如hide。同时，我们还需要为按钮添加一个类hide-btn，以便我们后期可以绑定事件。

.hide {
      display: none;
}

现在我们需要使用JavaScript来绑定事件。我们可以使用getElementById方法找到按钮，然后添加click事件。当按钮被点击时，我们会在图片的class属性中添加hide类。再次点击按钮时，我们会将hide类从图片中移除。

document.getElementById('hide-btn').addEventListener('click', function() {
      var pic = document.getElementsByClassName('pic')[0];
  if (pic.classList.contains('hide')) {
        pic.classList.remove('hide');
        this.innerHTML = '隐藏图片';
  }
 else {
        pic.classList.add('hide');
        this.innerHTML = '显示图片';
  }
}
    );
    

现在我们就可以在网页上使用按钮隐藏图片了。这个技巧可以用于隐藏弹出层或者其他元素。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！