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