Is there a way to dynamically change a button's CSS class?

Question

Hello everyone...

I'm working on a Wicket-based web application. In the application there are buttons that not every user is authorized to use. These buttons are actually simple links, e.g.

<a wicket:id="publishButton" title="Publish" class="rightPanel_publish"><wicket:message key="publish"/></a>

with a CSS class (from an external CSS file) that sets their visual appearance, e.g.

a.rightPanel_publish {
    display: block;
    width: 90px;
    height: 27px;
    background: url( ../imgs/right_panel_icon03.gif ) left top repeat-y;
    text-decoration: none;
    color: black;
    padding: 12px 0px 0px 35px;
}

When the user is not authorized to use the button, the link is disabled (in Java) and the CSS, for some reason, is not used anymore.

My question is this: is there a way to identify that the link is disabled at runtime and change the CSS class? I would rather avoid using javascript (managed to keep the entire project JS-free so far...), and prefer something that would work with all browsers.

Thanks a bunch,

Yuval =8-)

Answer 1

Unfortunately I don't know of a way to change a button's page without JS. CSS, Java and everything else runs while the page is loading, after the page has loaded the only way to interact with the page is via JS.

However here is the JS that works in any browser (IE 6+, Safari, Opera, FF, etc),

  if(document.getElementById('foo'))
  {
    document.getElementById('foo').className='bar';
  }

Answer 2

There is no way to do this without scripting of some kind. The "D" in "DHTML" stands for "Javascript" :P

---

Edit: Actually, since you say something is disabling the link/button, that something could/should also append a "disabled" class (the only x-browser way to get CSS to notice) to the same element. Run-time switching doesn't come into it - if a thing is changing state it needs to do so thoroughly.