> Markdown version of [Dynamic Styling Using the Element API](https://vaadin.com/docs/v14/flow/element-api/tutorial-dynamic-styling). Section index: [llms.txt](https://vaadin.com/docs/v14/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="using-classlists-and-classnames"></a>Using classLists and classNames

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");

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

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

You cannot 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");
```

`7C9322C2-407F-4255-B60D-CAC31207E581`