0

I am trying to modify a CSS stylesheet by setting its cssText attribute but it isn't sticking.

Test Page

Pushing the button should toggle its appearance from a red arrow to a black arrow and black but nothing changes. This appears in the javascript log:

changed cssText from .movebutton button { width: 100px; height: 100px; background-image: url("redarrow.svg"); } to .movebutton button { width: 100px; height: 100px; background-image: url("redarrow.svg"); } should be .movebutton button { width: 100px; height: 100px; background-image: url("blackarrow.svg"); }

changed cssText from .movebutton button { width: 100px; height: 100px; background-image: url("redarrow.svg"); } to .movebutton button { width: 100px; height: 100px; background-image: url("redarrow.svg"); } should be .movebutton button { width: 100px; height: 100px; background-image: url("redarrow.svg"); }

changed cssText from .movebutton button { width: 100px; height: 100px; background-image: url("redarrow.svg"); } to .movebutton button { width: 100px; height: 100px; background-image: url("redarrow.svg"); } should be .movebutton button { width: 100px; height: 100px; background-image: url("blackarrow.svg"); }

changed cssText from .movebutton button { width: 100px; height: 100px; background-image: url("redarrow.svg"); } to .movebutton button { width: 100px; height: 100px; background-image: url("redarrow.svg"); } should be .movebutton button { width: 100px; height: 100px; background-image: url("redarrow.svg"); }

So basically it seems as if the change is not sticking. This is in Firefox 7.0.1.

Joseph Shraibman
  • 462
  • 4
  • 11
  • 2
    It'd be far easier to change a class on the element in question, than it would be to rewrite the style sheets. How about `.movebutton red` and `.movebutton black` for classes? Easy enough to tie those two together in the stylesheet and then you just switch between red/black, which is EASY, versus rewriting stylesheets, which is much harder. – Marc B Nov 14 '11 at 21:47
  • I know I could work around the problem by changing the class, I was just wondering why this didn't work, for future reference. – Joseph Shraibman Nov 14 '11 at 21:59

1 Answers1

0

Why are you trying to change the style definition at runtime?.. The faster, easier and cleaner way to achieve this is to define your styles in the CSS definition:

.movebuttonRed {  width: 100px; height: 100px;  background-image: url(http://www.tupari.net/jstest/redarrow.svg);}
.movebuttonBlack {  width: 100px; height: 100px;  background-image: url(http://www.tupari.net/jstest/blackarrow.svg);}

And then change the elements className attribute using Javascript - 

if (document.getElementById("mybutton").className == "movebuttonRed") {
    document.getElementById("mybutton").className = "movebuttonBlack";
} else {
    document.getElementById("mybutton").className = "movebuttonRed";
}
Zohar.Babin
  • 265
  • 1
  • 2
  • 8
  • Right, I know I can do that, and I probably will. I just want to know why changing the style sheet didn't work. – Joseph Shraibman Nov 18 '11 at 05:59
  • stylesheets are processed by the browser on page load. think of the stylesheet definitions as constants in other programming languages. it makes no sense to go about changing the stylesheet definition at runtime.. these are definitions, not dynamic variables. – Zohar.Babin Nov 18 '11 at 16:40
  • @Zohar.Babin that's totally wrong. See this: http://stackoverflow.com/questions/2011176/changing-a-stylesheet-using-jquery – user1514042 Jan 11 '13 at 14:48