Show/Hide element when clicking buttons

后端 未结 2 1623
佛祖请我去吃肉
佛祖请我去吃肉 2021-01-17 08:02

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.

相关标签:
2条回答
  • 2021-01-17 08:31

    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="" />

    0 讨论(0)
  • 2021-01-17 08:42

    function show(){
      document.getElementById('image').style.display = "inline";
      }
    
    function hide(){
      document.getElementById('image').style.display = "none";
      }
    <img src="http://colorvisiontesting.com/images/plate%20with%205.jpg" width="80px" height="80px" id="image"/><br />
    <button onClick="hide();">Hide</button>
    <button onClick="show();">Show</button>

    0 讨论(0)
提交回复
热议问题