Changing external stylesheet properties with javascript

Associate
Joined
2 Aug 2005
Posts
680
Does anyone know if it's possible to change a property in an external stylesheet using javascript?

I've created a script for image rollovers which change the src of the image tag on rollover. Is it possible to change the background image of a list item specified within my stylesheet in a similar way? I can post the javascript for the rollover if it's any help.

Thanks
 
Yes, but it should be avoided - it's almost always better to use classes like so:

Code:
.foo { border:1px solid #f00; }
.foo-hover { border:1px solid #00f; }

Code:
document.getElementById("foo").className = "foo-hover";

But if you're just doing something like an image rollover, it's better still to do it in pure CSS.
 
I'm doing a rollover but the image that is hovered over changes (using CSS), but I also want a div on the page to change to a description of the link. I was having trouble finding this solution for id instead of classes. Is there a better way of doing this do you think? lol
 
Ok, getting closer, I've used this code:

Code:
document.getElementById("iButton1").style.backgroundImage="url(imgText[imgNum]);"

but instead of replacing the end of the code with the image location from the array, it's literally writing "imgText[imgNum]", is there anyway I can get around that?
 
People more experienced than me will probably explain why this is a bad idea, but it should work:

Code:
document.getElementById("iButton1").style.backgroundImage=eval("url(" + imgText[imgNum] + ")");
 
Thanks guys. I wasn't getting anywhere so I changed the image to an actual image (I think will probably make more sense). Am I joining the array contents to the DOM bit properly?

Code:
document.iButton[boxNum]+.src = imgText[imgNum];

The javascript console in FF is saying that the function isn't defined, but I think it's the above bit of code causing the problem. This is the function anyway

Code:
function changeImg(boxNum,imgNum)

Cheers everyone for helping :)
 
Back
Top Bottom