Javascript JS元素样式转换_Javascript_Html

Javascript JS元素样式转换

javascript html

Javascript JS元素样式转换,javascript,html,Javascript,Html,我需要切换我的元素背景图像，每次点击它都会赢得两张图像我有这个，它只换了两次颜色=\ <html> <head> <title>Javascript Change Div Background Image</title> <style type="text/css"> #div1 { width:100px; height:30px; background-image:url(blu

我需要切换我的元素背景图像，每次点击它都会赢得两张图像

我有这个，它只换了两次颜色=\

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


Javascript更改Div背景图像
#第一组{
宽度：100px；
高度：30px；
背景图片：url（blue.png）；
}
函数changeDivImage（）{
var imgPath=新字符串（）；
imgPath=document.getElementById（“div1”）.style.backgroundImage；
如果（imgPath==“url（blue.png）”| | imgPath==”）{
document.getElementById（“div1”）.style.backgroundImage=“url（green.png）”；
}
否则{
document.getElementById（“div1”）.style.backgroundImage=“url（blue.png）”；
}
}

此Javascript示例将更改
的背景图像
HTML Div标记onclick事件。

下面的代码应该处理它

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

}

您可能需要引用url，即

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

我猜浏览器现在正在为您这样做，这使得比较失败。猜。。一个更稳定的解决方案可能是维护一个变量来跟踪当前背景图像，而不是比较css属性中的字符串。

一些浏览器可能会为您提供图像的绝对路径，而不是您提供的相对路径

测试url的

索引（）位置，而不是==

示例：（单击按钮数次以查看url更改）
编辑：更新以将if（）
替换为三元。
尝试警告imgPath
，查看url（green.png）是否解析为图像的完整url路径，在这种情况下，if将失败。。同时检查（更有可能）浏览器是否在url周围添加引号。为什么不使用CSS类？不，引号不是必需的。
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)";

}