Question

如何通过onclick点击图像将图像更改为不同的图像？

#box{ height:200px; width:200px; background-color:gold; }

<body>
    <div id="box"></div>
    <script type="text/javascript">
        document.getElementById("box").onclick = function() {
            document.getElementById("box").style.display = ???? 
        }
    </script>
</body>

Answer 1

更新html元素的backgroundImage property in style property

document.getElementById("image1").onclick = function() {
   this.style.backgroundImage = 'url(img.jpg)'
}

#box {
  height: 200px;
  width: 200px;
  background-color: gold;
}

<div id="box"></div>
<script type="text/javascript">
  document.getElementById("image1").onclick = function() {
    this.style.backgroundImage = 'url(img.jpg)';
  }
</script>

Answer 2

使用jQuery：

$('your_image_id_or_selector').click(function(){
   $(this).attr('src','new_image_url');
});

如何通过点击onclick将图像更改为不同的图像？

2 个答案: