Webflow Designer API: Get Styles

`element.getStyles()`

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

Syntax

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

Returns

Promise<Style>

A Promise that resolves to an array of Style Objects.

Example

1 // Get Selected Element
2 const selectedElement = await Webflow.getSelectedElement()
3 
4 if (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))
25 }

Designer Ability

Checks for authorization only

Designer Ability	Locale	Branch	Workflow	Sitemode
canAccessCanvas	Any	Any	Any	Any

1	// Get Selected Element
2	const selectedElement = await Webflow.getSelectedElement()
3
4	if (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))
25	}