document.body.style.backgroundImage isn't working cross
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.
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.
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?
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 */
上一篇: 使用PHP为body标签添加属性