點擊更改圖標圖像

這是我想要做的。有四個圖標，當我們點擊一個圖標時，它的背景圖像應該改變。當我們再次點擊它時，第一個圖像應該再次出現。這是我的代碼。謝謝你的幫助 ;我花了一些時間，但我沒有找到解決方案：「如果」boucle不認識背景的價值。非常感謝您的幫助。點擊更改圖標圖像

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

來源

2014-05-04 user3601480

對不起，我在這個網站新。我會盡力糾正它。但你應該更多地試圖解決我的問題，而不是說這個。 – user3601480

[使用JavaScript獲取CSS值]的可能重複（http://stackoverflow.com/questions/6338217/get-a-css-value-with-javascript） – JJJ

@ user3601480在編輯標題後刪除了-1 。不用擔心，歡迎來到現場。 –

的if條件可能不會對結果作爲背景圖像通過CSS類應用，而不是內聯樣式第一次爲真。

因此，解決辦法是

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

來源

2014-05-04 15:05:27 Senthilnathan

點擊更改圖標圖像

回答

相關問題