单击按钮时显示/隐藏元素 [英] Show/Hide element when clicking buttons

问题描述

我有两个按钮显示和隐藏，我有一个图像所以我想知道当我点击隐藏按钮时，img将消失，当我点击显示按钮时它将再次出现。我不想用CSS或JQUERY只做Javascript。如果有人可以帮助感谢很多。

I have two buttons Show and Hide and I have an image so I want to know when I click the hide button the img will disappear and when I click show button it will appear again. And I don't want to do it with CSS or JQUERY only Javascript. If someone can help thanks a lot.

推荐答案

window.onload = function(){
  var myImg = document.getElementById('myImg');
  
  document.getElementById('hideBtn').onclick = function(){
      myImg.style.display = 'none';
  };
  
  document.getElementById('showBtn').onclick = function(){
      myImg.style.display = '';
  };
  
  document.getElementById('toggleBtn').onclick = function(){
      var display = getComputedStyle(myImg).display=='none'?'':'none';
      myImg.style.display = display;
  };
}

<button id="hideBtn">Hide</button>
<button id="showBtn">Show</button>
<button id="toggleBtn">Toggle</button>
<br/>
<img id="myImg" src="http://www.eastcottvets.co.uk/uploads/Animals/gingerkitten.jpg" alt="" />

这篇关于单击按钮时显示/隐藏元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！