Question

这是我想要做的。有四个图标，当我们点击一个图标时，它的背景图像应该会改变。当我们再次点击它时，第一张图像应该再次出现。这是我的代码。谢谢你的帮助 ;我花了一些时间，但我没有找到解决方案：＆＃34; if＆＃34;块没有识别背景值。非常感谢帮助我。

<!DOCTYPE html>
<html lang="fr">
    <head>
    <meta charset="utf-8">
    <title>Test</title>
        <style type="text/css">
    #image1, #image2, #image3, #image4 {
    background: url('icon1.png');
        width:24px;
    height:24px;
        }
    </style>
</head>
<body>

    <p id="image1" onclick="change(this)"></p>
    <p id="image2" onclick="change(this)"></p>
    <p id="image3" onclick="change(this)"></p>
    <p id="image4" onclick="change(this)"></p>

    <script type="text/javascript">
    function change(element) {
        if(element.style.background == "url('icon1.png')") {
            element.style.background = "url('icon2.png')";
        } else {
            element.style.background = "url('icon1.png')";
        }
    }       
    </script>

</body>
</html>

Answer 1

由于背景图像是通过css类而非内联样式应用的，因此if条件第一次可能无效。

所以解决方案是

function change(element) {
  var imgURL = window.getComputedStyle(element).getPropertyValue("background-image");
  if(imgURL == "url('icon1.png')") {
    element.style.background = "url('icon2.png')";
  } else {
    element.style.background = "url('icon1.png')";
  }
}

点击时更改图标图像

1 个答案: