Go Headless

Build Apps

Client

API Preview

Ricos

Develop Websites

REST

Velo

GraphQL (Alpha)

# Wix.Styles

## getStyleId

Retrieves the component’s styleId. The styleId represents a set of style parameters we’ve stored for a specific component – colors, fonts, numbers, and booleans.

> **SDK Version**: SDK 1.65.0+      
**Editor Version**: New Editor      
**Display**: Live Site, Preview      
**Components**: Widget, Pinned (aka Fixed-Position) Widget, Page    

Once you know the component’s styleId, you can retrieve these style parameters using [getStyleParamsByStyleId](#getstyleparamsbystyleid).


**Syntax**:

```JavaScript
Wix.Styles.getStyleId(callback)
``` 

**Parameters**:

|Name	|Type	|Description|
|---|---|---|
|callback (required)|Function| A callback function that receives the styleId|

**Example**:

```JavaScript
Wix.Styles.getStyleId(function(styleId){
    //do something with the styleId
});
```

## getStyleParams

Retrieves the style parameters of the current component: booleans, numbers, colors, and fonts.

> **SDK Version**: SDK 1.26.0+      
**Editor Version**: New Editor, Old Editor      
**Display**: Live Site, Preview      
**Components**: Widget, Pinned (aka Fixed-Position) Widget, Page    

> **Note:**  
If calling this method in the settings endpoint, it returns the style parameters of the component that opened the settings endpoint.


**Syntax**:

```JavaScript
Wix.Styles.getStyleParams(\[callback\])
``` 

**Parameters**:

|Name	|Type	|Description|
|---|---|---|
|callback|Function| Callback function to retrieve the style values|

**Example**:

```JavaScript
Wix.Styles.getStyleParams( function(styleParams) {
    //do something with the style params
});
```

**Returns**:

```JSON
//returns an object with all of the style parameters
{
    booleans: {
        showDescription: true,
        showTitle: true
    },
    Colors:{
        titleColor: {
            themeName: "color-5",
            value: "#302D2D"
        }
    },
    fonts: {
        btnFont: {
            displayName: "Paragraph 2",
            editorKey: "font_8",
            family: "din-next-w01-light",
            fontStyleParam: true,
            preset: "Custom",
            Size: 15,
            Style: {
               bold: false,
               italic: false,
               underline: false,
            },
            value: "font:normal normal normal 15px/18px din-next-w01-light, din-next-w02-light, din-next-w10-light, sans-serif;"
        }
    },
    Numbers:{
        Animation: 2
    }
}
```

## getStyleParamsByStyleId

Retrieves the style parameters for a given styleId. The styleId represents a set of style parameters we’ve stored for a specific component – colors, fonts, numbers, and booleans.

> **SDK Version**: SDK 1.65.0+      
**Editor Version**: New Editor      
**Display**: Live Site, Preview      
**Components**: Widget, Pinned (aka Fixed-Position) Widget, Page    

You can get the component’s styleId using [getStyleId](#getstyleid).

**Syntax**:

```JavaScript
Wix.Styles.getStyleParamsByStyleId(styleId, onSuccess, \[onFailure\])
``` 

**Parameters**:

|Name	|Type	|Description|
|---|---|---|
|styleId (required)|String|The component’s styleId|
|onSuccess (required)|Function|Callback function to retrieve the component’s style parameters|
|onFailure|Function |Callback function to handle the case that the styleId wasn't found|

**Example**:

```JavaScript
Wix.Styles.getStyleParamsByStyleId(
    'djk32',
    function(styleParams) { //do something with the styleParams },
    function(){ //throw error }
);
```