document.body.style.backgroundImage不能正常工作

 

我正在写一个函数来切换光线和黑暗之间的身体背景，包括平铺图像和备用背景颜色。 在index.html中，我的身体标记是： 

<body style="background-color:#111111; background-image:url('dvsup.png');">

看来我必须在index.html中将我想要更改的样式放在javascript中，否则它不起作用。 至少，不在IE9中。

以下是我的script.js中的代码片段： 

function _(el){return document.getElementById(el);}
// this just acts as shorthand

//here's the problematic function:
function light(){
    _("lights").className=
    (_("lights").className==="deselected")?
    "selected":"deselected";

    document.body.style.backgroundColor=
    (document.body.style.backgroundColor==="#111111")?
    "#EFEFEF":"#111111";

    document.body.style.backgroundImage=
    (document.body.style.backgroundImage==="url('dvsup.png')")?
    "url('dvsupw.png')":"url('dvsup.png')";}

这在工作计算机上完全适用于IE9。 当按钮调用“light（）”时，它会更改背景图像和颜色以及按钮本身的类别。 在Chrome和Chromium（在家中），它崩溃了。 className从“selected”改为“deselected”起作用，但其余部分不起作用。

奇怪的是，如果我改变“===”标识符“=”为assigners“style.backgroundColor”和“style.backgroundImage”，在镀铬的背景图像将在调用时变为“dvsupw.png”“光（）” ，但不会改回来。

我错过了明显的东西吗？ 这怎么不起作用？

如果我不清楚，告诉我。

谢谢。 人。

假设你不希望与影响相同属性的其他函数发生冲突的奇怪行为，只需使用一个。 这也避免了奇怪的URL问题。 

function light(){
    var lights = _('lights');
    if('selected' === (lights.className = (lights.className==='deselected'?'selected':'deselected')) ){
        document.body.style.backgroundColor = '#111111';
        document.body.style.backgroundImage = 'url('dvsup.png')';
    }else{
        document.body.style.backgroundColor = '#EFEFEF';
        document.body.style.backgroundImage = 'url('dvsupw.png')';
    }
    // ...
}

或者像其他人所建议的那样，在css中保留css，然后改变类。

我不能说IE，因为我没有在这里测试，但我在Chrome和Firefox中测试了你的代码，并且存在差异：

  • Chrome似乎忽略了引号（单或双），并将您的网址更改为完整的网址，从http://... 。 所以你必须检查=== url(http://domain.com/path/to/dvsup.png) 。

  • Firefox不会更改您的网址，但无论您使用什么引号（或根本没有引号），它都会用双引号替换它。 所以在Firefox上，你必须检查=== url("dvsup.png") 。

    • 正如我所说，我不知道IE，但只是比较Chrome和Firefox，它已经看起来像一团糟。 我会遵循@ epascarello的好建议。 你在#lights上切换类，为什么不在<body>上设置类，并为CSS上的两个类定义背景颜色和图像？

    为什么不尝试使用CSS设置背景颜色，然后使用调用它的jQuery创建一个函数。 像这样的东西： 

    background-color:#111;
var color = $(this).css("background-color");
/* here put your conditional for the color */
    链接地址: http://www.djcxy.com/p/87667.html

    上一篇: document.body.style.backgroundImage isn't working cross

    下一篇: Change button background color on click in mobile web app