Question

My CSS file below sets width “50px” for style “myButton”, and accordingly the element is correctly created with width 50px.

The issue is managing the element from Java (GWT). The following lines:

MyFile.java

final Element box1 = DOM.getElementById("myButton");
String test=box1.getStyle().getWidth();
box1.getStyle().setWidth(100, Unit.PX);
String test2=box1.getStyle().getWidth();

have as a result test=”” and test2=”100px”, and element is correctly resized to 100px.
Why doesn’t test have any value?

Thanks,

MyFile.html

<div style="width: 100%"> 
  <a  id ="myButton" href="#" class="myButton" style="text-decoration: none">Hey</a>    
</div>

MyFile.css

.myButton {
    display:block;
    padding: 10px;
    font-family:"Garamond 3 W01","Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;/*"Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;*/
    font-size: medium;
    color: #000000;
    text-align: center;
    border-radius: 8px;
    background-color: #E7E7E7;
    background-image: url('bar1.png');
    border-bottom: 1px solid #BBB;
    border-top: 1px solid #BBB;
    box-shadow: 0 0 6px 0 #B3B2B7;
    text-shadow: 0 1px 0 white;
    width: 50px; 
    height: 30px;
    margin: 10px 10px 10px 10px;
}

Answer 1

Element#getStyle() returns the same as JavaScript’s element.style, i.e. the style applied inline to the element (via its style="" attribute).

GWT does not emulate getComputedStyle or similar; if you really need them (which is unlikely; you should probably refactor your code instead), then you’ll have to use JSNI.

See https://developer.mozilla.org/en/DOM/element.style