Question

我正在编写一个功能来切换明暗之间的身体背景，包括平铺图像和备用背景颜色。在index.html中，我的body标签是：

<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”有效，但其余的则没有。

奇怪的是，如果我将“===”标识符更改为“=”分配器“style.backgroundColor”和“style.backgroundImage”，则在Chrome中，背景图像将更改为“dvsupw” .png“在调用”light（）“时，但不会改回来。

我错过了一些明显的东西吗？为什么这不起作用？

如果我不清楚，请告诉我。

感谢。人

Answer 1

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

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中，然后更改课程。

Answer 2

我不能谈论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上的两个类定义背景颜色和图像？

Answer 3

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

background-color:#111;
var color = $(this).css("background-color");
/* here put your conditional for the color */

document.body.style.backgroundImage不能跨浏览器工作

3 个答案: