使用Javascript隱藏然後顯示圖像

<script> 
function showhide() { 
document.getElementById('someimage').style.visibility="hidden"; 
     } 
</script>

此刻我可以隱藏圖像，但是我無法再顯示它。如何隱藏然後在使用javascript單擊按鈕時能夠顯示圖像？使用Javascript隱藏然後顯示圖像

這裏的按鈕：

<body> 
<input type="button" onclick="showhide()" /> 
</body>

來源

2013-02-25 Nihghel Hassans

@Guy也許OP不使用一些臃腫庫？也許吧@PeeHaa – PeeHaa 2013-02-25 21:40:59

。 – gmaliar 2013-02-25 21:43:02

你聽說過jQuery.toggle（）嗎？ http://api.jquery.com/toggle/ 將解決這個問題，我深深地建議使用它來解決這些簡單的問題，因爲所有的代碼實現都是爲您完成的。 – gmaliar 2013-02-25 21:44:30

的jQuery的奇觀 - http://jsfiddle.net/PbG3t/

$(function() { 
    $('#button').click(function() { 
     $('#someimage').toggle(); 
    }); 
});

來源

2013-02-25 21:41:24 gmaliar

只需查看當前的狀態是什麼，然後採取相應的行動。

function showhide() { 
    var img = document.getElementById('someimage'); 
    if (img.style.visibility === 'hidden') { 
     // Currently hidden, make it visible 
     img.style.visibility = "visible"; 
    } else { 
     // Currently visible, make it hidden 
     img.style.visibility = "hidden"; 
    } 
}

而關於jQuery的快速注意到所有這些提出的建議。

對於這樣的簡單事情，不需要包含一個大的DOM操作庫。如果你在一個更復雜的應用程序中做了很多這樣的DOM操作，那麼jQuery開始變得更有意義。

但是，當你使用它時，瞭解jQuery爲你做了什麼也很重要。

來源

2013-02-25 21:41:28

如果你使用jQuery，您可以使用（.toggle）方法，簡化了很多東西：

$('#someimage').toggle();

如果你想堅持用手工製作的解決方案，我想你的代碼實際上是缺少該決定位將元素的可見性設置爲可見。嘗試：

<script> 
    function showhide() { 
     var element = document.getElementById('someimage'); 
     element.style.visibility = element.style.visibility == 'visible' 
      ? 'hidden' 
      : 'visible'; 
    } 
</script>

乾杯，亞歷克斯

來源

2013-02-25 21:44:45

使用Javascript隱藏然後顯示圖像

回答

相關問題