Question

单击按钮时如何显示图像？这是我当前的HTML和CSS。

HTML：

<div id="Button"><button type="button">Deck of the week!</button></div>

CSS：

button {
background-color: Transparent;
border: 10px;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 32px;
font-family: "Dense Regular";

我做过研究，我知道我需要使用几个CSS和JavaScript元素取消隐藏图像，任何帮助？

Answer 1

试试这个：

<div>
    <button id="Button" href="#">Show/Hide</button>
    <image id="image" src="yourImagePathHere"></image>
</div>

document.getElementById('Button').addEventListener('click', function() {
    var imageElement = document.getElementById('image');
    imageElement.style.display = imageElement.style.display === 'none' ? 'block' : 'none';
});

Answer 2

试试这个：

<button type="button" onclick="hide()">Make Visible!</button>       
        <img src="Screenshot%20(5).png" id="pic" width="100px" height="100px" style="visibility:hidden"/>
         <script type="text/javascript">
        function hide() {
            var c = document.getElementById("pic");
            c.setAttribute("style","visibility:visible")
        }
        </script>

Answer 3

HTML：

<button type="button" onclick="hide()">Deck of the week!</button>
<img src="Screenshot%20(5).png" id="pic" width="100px" height="100px" style="visibility:hidden"/>

Javscript：

<script type="text/javascript">
function hide() {
  var c = document.getElementById("pic"); 
  c.setAttribute("style","visibility:visible")
}
</script>

Answer 4

有很多方法可以做到这一点。

没有jquery的继承人

HTML

<img src="image.png" id="image" style="display: none" />

<div id="Button"><button type="button" onclick="click()">Deck of the week!</button></div>

的javascript

function click() {
    getElementById("image").style.display = "block";
}

Answer 5

HTML

<div id="Button"><button>Click Me!</button></div>
<img src="image.jpg" id="image" style="display: none" />

jquery的

$( document ).ready(function() {

      $("#button").click(function() {

        $('#image').css({display:'block'});

       });

      });

单击按钮时如何取消隐藏图像？

5 个答案: