如何使用javascript修改CSS样式表（不更改元素样式表）

Question

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.

Answer 1

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";
}