4

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

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

看来我必须将我想通过 javascript 更改的样式放在index.html 中，否则它不起作用。至少，不是在 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 中，调用“light()”时背景图像将更改为“dvsupw.png” ，但不会变回来。

我错过了一些明显的东西吗？这怎么行不通？

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

谢谢。铝。

4

3 回答 3

1

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

background-color:#111;
var color = $(this).css("background-color");
/* here put your conditional for the color */
于 2012-11-02T02:01:41.310 回答
0

假设您不希望与影响相同属性的其他函数发生冲突而产生奇怪的行为，只需使用一个 if。这也避免了奇怪的 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 中，然后更改类。

于 2012-11-02T01:56:15.627 回答
0

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

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

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

正如我所说，我不了解 IE，但只是比较 Chrome 和 Firefox，它看起来已经很乱了。我会遵循@epascarello 的好建议。您正在切换类#lights，那么为什么不也设置类<body>，并在 CSS 上为这两个类定义背景颜色和图像呢？

于 2012-11-02T01:56:24.197 回答