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元素样式切换

回答

相关问题