change css rules dynamically

[bhomass]

I found there is a way to change css rules using javascript.

http://twelvestone.com/forum_thread/view/31411.

is there a way to do this using gwt?

[Adam T]

You can do it in at least 4 different ways in GWT. Say you define a
label as Label first = new Label("First Label") and add it to the DOM,
then you can do one of the following to hide it:

a) first.setVisible(false);
b) first.getElement().getStyle().setVisibility(Visibility.HIDDEN);
c) first.getElement().getStyle().setProperty("display", "hidden");
d) first.addStyleName("hidden-style"); (assuming you have hidden-
style defined in your style sheet and that sets the display property
to hidden)

//Adam

[Adam T]

...if you mean actually changing a value in an already defined style
sheet, then you need to use JSNI (or rethink your application to
change the style applied to elements rather than the style
definition).

//A

[dougx]

as above; not an entirely trivial problem, but this should get you
going on the road to a solution.
Note the requirement of a title tag on the style to identify it.

<style itype="text/css" title="MyStyleObject">
.myStyle {
margin: 10px;
border: 3px solid #f00;
}
</style>
<div class="myStyle">Hello World</div>

....

private void test() {
Stylesheet st = Stylesheet.loadStylesheet("MyStyleObject");
if (st != null)
st.setRule(".myStyle", "border: 5px solid #ff0");
}

...

/**
* Simple API for interacting with native style objects.
*/
public class Stylesheet {

/** Native instance. */
private Object _native = null;

/** Create a stylesheet interface with native reference. */
public Stylesheet(Object object) {
_native = object;
}

/** Loads a style sheet by title. */
public static Stylesheet loadStylesheet(String title) {
Stylesheet rtn = null;
Object _native = _loadStylesheet(title);
if (_native != null)
rtn = new Stylesheet(_native);
return(rtn);
}

private static native Object _loadStylesheet(String title) /*-{
var rtn = null;
try {
var sheet, i;
var set = $doc.getElementsByTagName("style");
for(i = 0; i < set.length; i++) {
sheet = set[i];
if (sheet.title == title) {
rtn = sheet;
if (rtn.styleSheet)
rtn = rtn.styleSheet;
else if (rtn.sheet)
rtn = rtn.sheet;
break;
}
}
}
catch(error) {}
return(rtn);
}-*/;

/** Inserts a CSS rule. */
public void setRule(String selector, String rule) {
int index = _getRuleIndex(_native, selector);
if (index != -1)
_deleteRule(_native, index);
_addRule(_native, selector, rule);
}

private static native void _addRule(Object sheet, String selector,
String rule) /*-{
try {
if (sheet.addRule)
sheet.addRule(selector, rule);
else if (sheet.insertRule)
sheet.insertRule(selector + "{ " + rule + "; }", 0);
}
catch(e) {}
}-*/;

private static native int _getRuleIndex(Object sheet, String
selector) /*-{
var rtn = -1;
try {
var set = null;
if (sheet.cssRules)
set = sheet.cssRules;
else
set = sheet.rules;
if (set) {
var i;
for (i = 0; i < set.length; ++i) {
if (set[i].selectorText == selector) {
rtn = i;
break;
}
}
}
}
catch(e) {}
return(rtn);
}-*/;

private static native void _deleteRule(Object sheet, int index) /*-
{
try {
if (sheet.deleteRule)
sheet.deleteRule(index);
else if (sheet.removeRule)
sheet.removeRule(index);
}
catch(e) {}
}-*/;