Dynamic Styling

To change the look and feel of your application, you can style it by using dynamic class names or inline styles. Using getClassList() in Element, you can dynamically modify the class names of any element as follows:

CSS

  1. .blue {
  2.   background: blue;
  3.   color: white;
  4. }

Java

  1. button.setText("Change to blue");
  2. button.addEventListener("click",
  3.     e -> button.getClassList().add("blue"));

In this case you are limited to the styles you have defined in advance. To get really dynamic styles, you can use the inline styling API getStyle():

Java

  1. Element input = ElementFactory.createInput();
  2. button.setText("Change to the entered value");
  3. button.addEventListener("click",
  4.     e -> button.getStyle().set("background",input.getProperty("value")));

Using getStyle() you can set any style property supported by the browser.