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

【问题标题】：document.body.style.backgroundImage isn't working cross-browserdocument.body.style.backgroundImage 不能跨浏览器工作
【发布时间】：2012-11-02 01:35:05
【问题描述】：

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

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

看来我要通过javascriptwithin index.html把我想改变的样式，不然不行。至少，在 IE9 中没有。

这是我 script.js 中的代码 sn-p：

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()”，但不会变回来。

我是否遗漏了一些明显的东西？这怎么不行？

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

谢谢。阿尔。

【问题讨论】：

你能把console.log(document.body.style.backgroundImage)的输出贴在IE和Chrome中吗？
尝试用单引号 (') 替换双引号 (")，反之亦然
尝试(b?t:f)而不是(b)?t:f，也可以在某些浏览器中将域和路径放入图像的url中。
您为什么要切换课程并设置值？您应该只切换一个类并在样式表中包含样式！
@epascarello 是绝对正确的，我不敢相信我以前没想过这样做。在“.lit”和“.unlit”类之间切换之后，代码在 IE9 和 Chrome 中都能实现梦想。谢谢。

标签： javascript css cross-browser styles background-image

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

感谢您的回复。我选择了 epascarello 和 @bfavaretto 的建议来切换身体的类别，并且效果很好。

【解决方案3】：

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

【讨论】：

我不敢相信我一开始就没有想过要走那条路。感谢您的回复。切换的类效果很好。