> Markdown version of [Dynamic Styling](https://vaadin.com/docs/v24/flow/create-ui/element-api/dynamic-styling). Section index: [llms.txt](https://vaadin.com/docs/v24/flow/llms.txt)

# Dynamic Styling Using the Element API

You can use the `Element` API to style elements using dynamic class names or inline styles.

The `Element` API includes two methods that facilitate styling:

- `getClassList()`: gets the set of CSS class names used for the element

- `getStyle()`: gets the style instance to manage element inline styles

## <a id="modifying-css-classes-on-an-element"></a>Modifying CSS Classes on an Element

You can use the `getClassList()` method to get a collection of CSS class names used for the element. The returned set can be modified to add or remove class names.

**Example**: CSS style rules.

```css
.blue {
  background: blue;
  color: white;
}
```

**Example**: Using the `getClassList()` method to dynamically modify the class names of an element.

```java
button.setText("Change to blue");
button.addEventListener("click",
    e -> button.getClassList().add("blue"));
```

**Example**: Using the `getClassList` method to add and remove classes.

```java
element.getClassList().add("error");
element.getClassList().add("critical");
element.getClassList().remove("primary");

// returns "error critical".
element.getProperty("className");
```

- The `element.getProperty("className")` method gets a set of all classes as a concatenated string.

You can’t modify `classList` or `className` properties directly using the `setProperty()` methods.

You can set and get an element’s `class` attribute using:

- `element.setAttribute("class", "foo bar")`: this clears any previously set `classList` property.

- `element.getAttribute('class')`: this returns the contents of the `classList` property as a single concatenated string.

## <a id="using-the-style-object"></a>Using the Style Object

You can set and remove inline styles for an element using the `Style` object returned by the `element.getStyle()` method. Style property names can be formatted in camel case (for example, `backgroundColor`) or kebab case (for example, `background-color`).

**Example**: Using the `getStyle()` method for dynamic inline styling.

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

**Example**: Setting and removing style objects using the `element.getStyle()` method.

```java
element.getStyle().set("color", "red");
//camelCase
element.getStyle().set("fontWeight", "bold");
//kebab-case
element.getStyle().set("font-weight", "bold");

//camelCase
element.getStyle().remove("backgroundColor");
//kebab-case
element.getStyle().remove("background-color");

element.getStyle().has("cursor");
```

`FCBB787F-B86D-44B1-AE23-0944E4F1D079`