document.body.style.backgroundImage不能跨瀏覽器工作

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中，調用“light（）”時背景圖像將更改為“dvsupw.png” ，但不會改變回來。

我錯過了一些明顯的東西嗎 為什么這不起作用？

如果我不清楚，請告訴我。

謝謝。 人。

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 個解決方案

解決方案1
0 2012-11-02 01:56:15

解決方案2
0 2012-11-02 01:56:24

解決方案3
0 2012-11-02 02:01:41

document.body.style.backgroundImage不能跨瀏覽器工作

問題描述

3 個解決方案

解決方案1 0 2012-11-02 01:56:15

解決方案2 0 2012-11-02 01:56:24

解決方案3 0 2012-11-02 02:01:41

解決方案1
0 2012-11-02 01:56:15

解決方案2
0 2012-11-02 01:56:24

解決方案3
0 2012-11-02 02:01:41