document.body.style.backgroundImage isn't working cross-browser

Question

I'm writing a function to toggle the body background between light and dark, both a tiled image and a backup background color. In index.html, my body tag is:

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

It seems I have to put the styles I want to change through javascript within index.html, or it doesn't work. At least, not in IE9.

Here's the code snippet in my 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')";}

This all works perfectly in IE9, on the work computer. When a button calls "light()", it changes the background image and color, and the class of the button itself. In Chrome and Chromium (at home), it falls apart. The changing of the className from "selected" to "deselected" works, but the rest doesn't.

Oddly, if I change the "===" identifiers to "=" assigners for "style.backgroundColor" and "style.backgroundImage", in Chrome the background image will change to "dvsupw.png" upon calling "light()", but won't change back.

Am I missing something obvious? How come this isn't working?

And if I haven't been clear, tell me.

Thanks. Al.

Could you post the output of `console.log(document.body.style.backgroundImage)` in IE and Chrome? — bfavaretto, Nov 02 '12 at 01:42
Try replacing double quotes (`"`) with single quotes (`'`) and vice-versa — PitaJ, Nov 02 '12 at 01:42
try `(b?t:f)` instead of `(b)?t:f`, also the domain and path may be put into the _url_ of the image in some browsers. — Paul S., Nov 02 '12 at 01:47
Why are you toggling a class and also setting values? You should just toggle a class and have the styles in the stylesheet! — epascarello, Nov 02 '12 at 01:52
@epascarello was absolutely correct, I can't believe I didn't think to do it before. After toggling the between the classes ".lit" and ".unlit," the code works a dream in both IE9 and Chrome. Thank you. — alsmith, Nov 02 '12 at 15:56

score 1 · Answer 1 · edited Nov 02 '12 at 04:35

1

Why don't you try to set the background color using CSS, and then make a function using jQuery that calls it. Something like this:

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

edited Nov 02 '12 at 04:35

KatieK

13,586
17
76
90

answered Nov 02 '12 at 02:01

Monica

1,524
4
27
44

Paul S. · Answer 2 · 2012-11-02T02:01:21.353

Assuming you don't want weird behaviour from conflicts with other functions that effect the same properties, just use one if. This avoids the strange-url problem, too.

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\')';
    }
    // ...
}

Or as others suggest, keep css in the css and just change the class.

Thanks for the response. I went with epascarello and @bfavaretto's advice toggling the class of the body and it works perfectly. — alsmith, Nov 02 '12 at 15:57

bfavaretto · Answer 3 · 2012-11-02T02:24:32.577

I can't speak about IE as I don't have it to test here, but I tested your code in Chrome and Firefox, and there are differences:

Chrome seems to ignore the quotes (either single or double), and changes your url to a full url, starting with http://.... So you have to check for === url(http://domain.com/path/to/dvsup.png).
Firefox does not change your url, but whatever quotes you use (or no quotes at all), it will replace it with double quotes. So on Firefox you'd have to check for === url("dvsup.png").

As I said, I don't know about IE, but just comparing Chrome and Firefox, it already looks like a mess. I'd follow @epascarello's good advice. You're toggling classes on #lights, so why not set classes on <body> too, and define the background color and image for both classes on the CSS?

I can't believe I didn't think to go down that route in the first place. Thanks for the response. Toggling the 's class works perfectly. — alsmith, Nov 02 '12 at 15:58

document.body.style.backgroundImage isn't working cross-browser

3 Answers3