Add Class to Element Action

Functionality

The Add Class Action is used to dynamically add one or more CSS classes to an HTML element with a specified ID. This action allows you to modify the appearance or behavior of the element by attaching one or more predefined CSS classes, which can control styles or animations. The classes can be added as a comma-separated list, providing flexibility to apply multiple styles or effects at once. It can be applied to any HTML element, such as buttons, links, divs, text fields, images, and more.

Steps

Here are the steps to follow in order to use the Add Class to Element action:

1

Search for "Add Class" in the Actions section.

2

Select the action with your element ID from the available options.

3

Click on the Action to open the editor.

4

Enter one or more CSS class names, separated by commas, in the "Classes to Add" field to modify the element’s appearance or behavior based on your defined CSS styles.

For Example

In this example, the "Change Style" button triggers the Add Class action, which adds the changeExample class (a predefined class) to the example div. Before the action is applied, the div has its default style. Once the class is added, the font style changes, the text is centered, and a border is added, making it look like a nicely styled box. You can also add the changeColor class, separated by a comma, to change the element’s color. Click the "Change Style" button to see how its styling and color are transformed.