Change property of CSS class in GWT at runtime

I'm familiar with assigning CSS classes to GWT elements to control their formatting, but what if I want to change an attribute in one of those CSS classes?

I've got a styled list of data. CSS classes are used to indicate the various data types (important, routine, trivial). I wish to allow the user to hide trivial entries. I'd like to modify the span.trivial CSS class to set display:none

I'm aware I could loop through the entries, see if an entry is trivial and add a noSh开发者_如何学Goow class (which itself has display:none) - but then I'm doing the looping, I'd rather let the browser do the work.

Is this possible in GWT?

Ian

---

I assume we have a structure similar to the following one

<div>
    <span class="routine">A</span>
    <span class="trivial">B</span>
    <span class="trivial">C</span>
<div>

This is how I would solve the problem:

.hideTrivial span.trivial {
    display: none;
}

<div class="hideTrivial">
    <span class="routine">A</span>
    <span class="trivial">B</span>
    <span class="trivial">C</span>
<div>

The ".hideTrivial span.trivial" selector applies only to "trivial" spans, if they occur within another element that has the class "hideTrivial". (Note: The span doesn't have to be a direct child of the "hideTrivial" div - it's ok, if you have a deeper element hierarchy.)

So to turn on/off hiding, you simply add/remove the "hideTrivial" class from the outer div.

(This technique can be used with and without GWT.)

---

AFAIK, javascript can not change the CSS file and have it reapplied. The same goes for GWT (since it compiles down to JS). So, you can not change a CSS rule and have all elements in your DOM reflect the change.

However, you can get a style of a DOM element and change that style. But that is for a particular element. In your case you'd still need to write code to traverses a set of element and make the change.

My suggestion would be to look at gwtQuery (a port, not a wrapper, of jQuery to GWT). It's super-efficient and super-compact. Here is a one-liner to do what you need:

$("span.trivial").hide()

---

Fot those who need to modify global CSS property values: you can choose StyleInjector for that purpose. http://google-web-toolkit.googlecode.com/svn/javadoc/2.0/com/google/gwt/dom/client/StyleInjector.html