JS元素樣式切換

我需要在每次點擊它時切換我的元素背景圖像beetwin兩個圖像。JS元素樣式切換

我有這個，BYT它swithes顏色只是兩次= \

<html> 
<head> 
    <title>Javascript Change Div Background Image</title> 

    <style type="text/css"> 

    #div1 { 
    width:100px; 
    height:30px; 
    background-image:url(blue.png); 
    } 


    </style> 

    <script language="javascript" type="text/javascript"> 
     function changeDivImage() { 
      var imgPath = new String(); 
      imgPath = document.getElementById("div1").style.backgroundImage; 

      if (imgPath == "url(blue.png)" || imgPath == "") { 
       document.getElementById("div1").style.backgroundImage = "url(green.png)"; 
      } 
      else { 
       document.getElementById("div1").style.backgroundImage = "url(blue.png)"; 
      } 
     } 
    </script> 

</head> 

<body> 

    <center> 
    <p> 
     This Javascript Example will change the background image of<br /> 
     HTML Div Tag onclick event. 
    </p> 
    <div id="div1"> 
    </div> 
    <br /> 
    <input type="button" value="Change Background Image" onclick="changeDivImage()" /> 
    </center> 

</body> 
</html>

來源

2010-09-26 TRAVA

嘗試提醒'imgPath'來查看url（green.png）是否被解析爲圖像的完整url路徑，在這種情況下，if將會失敗..也檢查以查看（更可能）if瀏覽器會在url附加引號.. – 2010-09-26 16:16:35

爲什麼不使用CSS類？ – 2010-09-26 20:16:10

某些瀏覽器可能會爲您提供圖像的絕對路徑，而不是您提供的相對路徑。

而不是==，測試url的indexOf()位置。

實施例：http://jsfiddle.net/7Rp2G/2/（點擊按鈕多次看到的URL變化）

function changeDivImage() { 
    var imgPath = new String(); 
    var div = document.getElementById("div1"); 
    imgPath = div.style.backgroundImage; 

    div.style.backgroundImage = (imgPath.indexOf("blue.png") > -1 || imgPath == "") 
           ? "url(green.png)" 
           : "url(blue.png)"; 

}

編輯：更新用三元更換if()。

來源

2010-09-26 16:20:58 user113716

我會盡力，謝謝你的建議。 – TRAVA 2010-09-26 16:25:15

多數民衆贊成在太多，謝謝！ – TRAVA 2010-09-26 16:43:19

下面的代碼應該照顧它。

var current_bg = 'green'; 

function changeDivImage() 
{ 

    if(current_bg == 'green') 
    { 

     current_bg = 'blue'; 

    } 
    else 
    { 

     current_bg = 'green'; 

    } 

    document.getElementById("div1").style.backgroundImage = "url('"+current_bg+".png')"; 

}

來源

2010-09-26 16:13:01 user396404

那就對了，謝謝！ – TRAVA 2010-09-26 16:24:13

你可能需要引用的URL，這是

backgroundImage = "url('blue.png')"

我猜瀏覽器現在正在做的是你的，這使得比較失敗。猜測..更穩定的解決方案可能是維護一個變量來跟蹤當前背景圖像，而不是比較css屬性中的字符串。

來源

2010-09-26 16:13:53

不，引號不是必需的。 – TRAVA 2010-09-26 16:23:30

JS元素樣式切換

回答

相關問題