Javascript 单击更改图标图像_Javascript_Css_If Statement_Background

Javascript 单击更改图标图像

javascript css if-statement

Javascript 单击更改图标图像,javascript,css,if-statement,background,Javascript,Css,If Statement,Background,这是我想做的。有四个图标，当我们点击一个图标时，它的背景图像应该会改变。当我们再次单击它时，第一个图像应该会再次出现。这是我的密码。谢谢你的帮助；我花了一些时间，但没有找到解决方案：“如果”块无法识别背景的值。非常感谢你帮助我 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Test</title>

这是我想做的。有四个图标，当我们点击一个图标时，它的背景图像应该会改变。当我们再次单击它时，第一个图像应该会再次出现。这是我的密码。谢谢你的帮助；我花了一些时间，但没有找到解决方案：“如果”块无法识别背景的值。非常感谢你帮助我

<!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>


试验
#图像1、图像2、图像3、图像4{
背景：url（'icon1.png'）；
宽度：24px；
高度：24px；
}




功能变更（要素）{
如果（element.style.background==“url（'icon1.png'）”）{
element.style.background=“url（'icon2.png'）”；
}否则{
element.style.background=“url（'icon1.png'）”；
}
}

由于背景图像是通过css类而不是内联样式应用的，因此

if

条件第一次可能不会成为true

因此解决方案将是

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')";
  }
}

对不起，我是这个网站的新手。我会尽力改正的。但你应该更努力地解决我的问题，而不是那样说。可能重复的@user3601480在你编辑标题后，我删除了-1。不用担心，欢迎来到我们的网站。谢谢你的留言。下次我会更专心的。仅供参考，“boucle”不是一个英语单词。