The Style
object is part of the Webflow Designer API. It represents a style that can be applied to Webflow elements on the canvas.
It provides numerous methods for managing CSS properties across different breakpoints and pseudo-states. From creating new styles to setting and retrieving properties, the Style Object is your primary tool for managing the look and feel of your Webflow designs."
Using CSS Properties
Please use use the long-form alias of a css property when managing styles. For example, the property
row-gap
has a long-form alias ofgrid-row-gap
which you can find the the MDN CSS Properties reference.
Creating Style Objects
To create a Style
, use the createStyle
method of the webflow object. This method takes the name of the new style as an argument and returns a new Style
object.
let myStyle = webflow.createStyle('myNewStyle');
// myStyle is now a Style object with the class name 'myNewStyle'
Once a Style
is created, it can be used to manage CSS properties for elements on the Webflow canvas. Note that the createStyle
method will always create a new style, even if a style with the same name already exists. If you want to modify an existing style, you should retrieve it using the appropriate method from the API rather than creating a new one.
Combo Classes are read-only
Currently, Designer APIs do not support writing or editing Combo Classes.
Methods
Get Style Name
getName()
Returns:string
Description Retrieve the name of the Style.
let styleName = myStyle.getName();
console.log("Style Name:", styleName);
Get Style Properties
getProperties(options?: BreakpointAndPseudo): PropertyMap
Parameters:
options
(optional):BreakpointAndPseudo
- Options to filter properties based on breakpoints and pseudo classes / states.
Returns: PropertyMap
- CSS properties and their values for the given breakpoint and pseudo-state.
Description: Retrieve the properties of the style.
let styleProperties = myStyle.getProperties();
console.log("Style Properties:", styleProperties);
Set Style Properties
setProperties(props: PropertyMap, options?: BreakpointAndPseudo): undefined
Parameters:
props
:PropertyMap
- The new properties to set for the style.options
(optional):BreakpointAndPseudo
- Options to filter properties based on breakpoints and pseudo classes / states.
Description: Sets CSS properties for the Style at the given breakpoint and pseudo-state. Returns undefined.
myStyle.setProperties({ color: 'red', 'font-size': '16px' }, { breakpoint: 'main', pseudo: 'hover' });
Get Style Property
getProperty(prop: string, options?: BreakpointAndPseudo): null | string
Parameters:
prop
:string
- The name of the property to retrieve.options
(optional):BreakpointAndPseudo
- Options to get property based on breakpoints and pseudo classes / states.Returns:null | string
Description: Returns the value of a specific CSS property for the given breakpoint and pseudo-state, or null if the property does not exist.
let color = myStyle.getProperty('color', { breakpoint: 'main', pseudo: 'hover' });
let fontSize = myStyle.getProperty("fontSize");
console.log("Font Size:", fontSize);
Set Style Property
setProperty(prop: string, value: string, options?: BreakpointAndPseudo): undefined
Parameters:
prop
:string
- The name of the property to set.value
:string
- The new value to set for the property.options
(optional):BreakpointAndPseudo
- Options to set property based on breakpoints and pseudo classes / states.
Description:Sets a specific CSS property for the Style at the given breakpoint and pseudo-state. Returns undefined.
myStyle.setProperty('color', 'blue', { breakpoint: 'main', pseudo: 'hover' });
Clear Properties
clearAllProperties(): undefined
Description:Removes all CSS properties from the Style.
Returns: undefined
myStyle.clearAllProperties();
Save Style Changes
save(): Promise<undefined>
Returns: Promise
Description: Saves the current state of the Style to the Designer. When an element is saved, all styles that are referenced by the element will also be saved automatically. Note: Style names must be unique within the site.
await myStyle.save()
// The style has been saved
Delete Style
destroy():undefined
Description: The destroy method is used to remove the local reference to the style and trigger the cleanup process. After you call destroy, you should no longer use the style object in your code. This method does not remove the style from the Designer.
myStyle.destroy();
Breakpoints and Pseudo-States
The BreakpointAndPseudo
type is used to specify breakpoints and pseudo-states for the getProperties
, setProperties
, getProperty
, and setProperty
methods. It is an object that can have breakpoint
and pseudo
properties.
Valid values for breakpoint
are:
- 'xxl',
- 'xl',
- 'large',
- 'main',
- 'medium',
- 'small',
- and 'tiny'.
Valid values for pseudo
are
- 'noPseudo',
- 'nth-child(odd)',
- 'nth-child(even)',
- 'first-child',
- 'last-child',
- 'hover',
- 'active',
- 'pressed',
- 'visited',
- 'focus',
- 'focus-visible',
- 'focus-within',
- 'placeholder',
- 'empty',
- 'before',
- and 'after'.
These options allow you to specify styles that will apply under different conditions, such as different viewport sizes (breakpoints) or different states of an element (pseudo-states).
For example, you could use the setProperty
method to set the color of a text element to red when it is hovered over on medium-sized screens:
myStyle.setProperty('color', 'red', { breakpoint: 'medium', pseudo: 'hover' });
Likewise, you could use the getProperties
method to get all the properties that apply to an element when it is the first child of its parent on small screens:
let properties = myStyle.getProperties({ breakpoint: 'small', pseudo: 'first-child' });
// Do something with properties
This flexibility allows you to create responsive designs that adapt to different screen sizes and interactive designs that respond to user actions.