Styles

Styles are key to creating dynamic and responsive designs in Webflow.

In the Designer, you can manage style changes through Classes. In the Webflow API, these Classes are Style Objects - with distinct CSS properties - that can be applied to an element. The methods described below give you direct control over which styles are applied to elements, letting you change a page’s appearance and layout as needed. To directly manage CSS properties within a Style Object, use the Style Methods.

Methods

element.getStyles()

Retrieve the current style properties of the element for analysis or changes.

Syntax

1element.getStyles(): Promise<Array<Style>>

Returns

Promise<Style>

A Promise that resolves to an array of Style Objects.

Example

1// Get Selected Element
2const selectedElement = await webflow.getSelectedElement()
3
4if (selectedElement?.styles) {
5
6  // Get Styles
7  const styles = await selectedElement.getStyles()
8
9  // Get Style Details
10  const styleDetails = styles.map(async style => {
11
12    const styleName = await style.getName()
13    const styleProperties = await style.getProperties()
14
15    return {
16      Name: styleName,
17      Properties: styleProperties,
18      ID: style.id,
19    }
20
21  })
22
23  // Print Style Details
24  console.log(await Promise.all(styleDetails))

Designer Ability

Checks for authorization only

Designer AbilityLocaleBranchWorkflowSitemode
canAccessCanvasAnyAnyAnyAny

element.setStyles(styles)

Set styles on an element.

Syntax

1element.setStyles(styles: Array<Style>): Promise<null>>

Parameters

Returns

Promise<null>

A Promise that resolves to null.

Example

1// Get Selected Element
2const selectedElement = await webflow.getSelectedElement()
3
4if (selectedElement?.styles) {
5
6  // Create a new style
7  const newStyle = await webflow.createStyle("MyCustomStyle");
8
9  // Set properties for the style
10  newStyle.setProperties({
11    'background-color': "blue",
12    'font-size': "32px",
13    'font-weight': "bold",
14  });
15
16  // Set style on selected element
17  selectedElement.setStyles([newStyle])
18
19}