---
title: "CSSUnitValue | JavaScript maps SDK"
description: "Documentation for MapTiler SDK"
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Interface CSSUnitValue

The **`CSSUnitValue`** interface of the CSS Typed Object Model API represents values that contain a single unit type. For example, "42px" would be represented by a CSSNumericValue.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/CSSUnitValue)

interface CSSUnitValue {  
    [unit](#unit): string;  
    [value](#value): number;  
    [add](#add-1)(...values: [CSSNumberish](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CSSNumberish/)\[\]): [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/);  
    [div](#div-1)(...values: [CSSNumberish](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CSSNumberish/)\[\]): [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/);  
    [equals](#equals-1)(...value: [CSSNumberish](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CSSNumberish/)\[\]): boolean;  
    [max](#max-1)(...values: [CSSNumberish](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CSSNumberish/)\[\]): [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/);  
    [min](#min-1)(...values: [CSSNumberish](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CSSNumberish/)\[\]): [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/);  
    [mul](#mul-1)(...values: [CSSNumberish](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CSSNumberish/)\[\]): [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/);  
    [sub](#sub-1)(...values: [CSSNumberish](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CSSNumberish/)\[\]): [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/);  
    [to](#to-1)(unit: string): CSSUnitValue;  
    [toString](#tostring-1)(): string;  
    [toSum](#tosum-1)(...units: string\[\]): [CSSMathSum](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSMathSum/);  
    [type](#type-1)(): [CSSNumericType](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericType/);  
}

#### Hierarchy ([View Summary](https://docs.maptiler.com/sdk-js/api-reference/hierarchy/#Externals.CSSUnitValue))

-   [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/)
    -   CSSUnitValue

##### Index

### Properties[](#properties)

[unit](#unit) [value](#value)

### Methods[](#methods)

[add](#add) [div](#div) [equals](#equals) [max](#max) [min](#min) [mul](#mul) [sub](#sub) [to](#to) [toString](#tostring) [toSum](#tosum) [type](#type)

## Properties[](#properties-1)

### `Readonly`unit[](#unit)

unit: string

The **`CSSUnitValue.unit`** read-only property of the CSSUnitValue interface returns a string indicating the type of unit.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/CSSUnitValue/unit)

### value[](#value)

value: number

The **`CSSUnitValue.value`** property of the CSSUnitValue interface returns a double indicating the number of units.

[MDN Reference](https://developer.mozilla.org/docs/Web/API/CSSUnitValue/value)

## Methods[](#methods-1)

### add[](#add)

-   add(...values: [CSSNumberish](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CSSNumberish/)\[\]): [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/)[](#add-1)
    
    The **`add()`** method of the CSSNumericValue interface adds a supplied number to the CSSNumericValue.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CSSNumericValue/add)
    
    #### Parameters
    
    -   ...values: [CSSNumberish](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CSSNumberish/)\[\]
    
    #### Returns [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/)
    
    Inherited from [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/).[add](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/#add)
    

### div[](#div)

-   div(...values: [CSSNumberish](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CSSNumberish/)\[\]): [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/)[](#div-1)
    
    The **`div()`** method of the CSSNumericValue interface divides the CSSNumericValue by the supplied value.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CSSNumericValue/div)
    
    #### Parameters
    
    -   ...values: [CSSNumberish](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CSSNumberish/)\[\]
    
    #### Returns [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/)
    
    Inherited from [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/).[div](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/#div)
    

### equals[](#equals)

-   equals(...value: [CSSNumberish](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CSSNumberish/)\[\]): boolean[](#equals-1)
    
    The **`equals()`** method of the CSSNumericValue interface returns a boolean indicating whether the passed value are strictly equal. To return a value of true, all passed values must be of the same type and value and must be in the same order. This allows structural equality to be tested quickly.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CSSNumericValue/equals)
    
    #### Parameters
    
    -   ...value: [CSSNumberish](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CSSNumberish/)\[\]
    
    #### Returns boolean
    
    Inherited from [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/).[equals](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/#equals)
    

### max[](#max)

-   max(...values: [CSSNumberish](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CSSNumberish/)\[\]): [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/)[](#max-1)
    
    The **`max()`** method of the CSSNumericValue interface returns the highest value from among the values passed. The passed values must be of the same type.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CSSNumericValue/max)
    
    #### Parameters
    
    -   ...values: [CSSNumberish](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CSSNumberish/)\[\]
    
    #### Returns [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/)
    
    Inherited from [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/).[max](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/#max)
    

### min[](#min)

-   min(...values: [CSSNumberish](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CSSNumberish/)\[\]): [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/)[](#min-1)
    
    The **`min()`** method of the CSSNumericValue interface returns the lowest value from among those values passed. The passed values must be of the same type.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CSSNumericValue/min)
    
    #### Parameters
    
    -   ...values: [CSSNumberish](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CSSNumberish/)\[\]
    
    #### Returns [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/)
    
    Inherited from [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/).[min](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/#min)
    

### mul[](#mul)

-   mul(...values: [CSSNumberish](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CSSNumberish/)\[\]): [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/)[](#mul-1)
    
    The **`mul()`** method of the CSSNumericValue interface multiplies the CSSNumericValue by the supplied value.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CSSNumericValue/mul)
    
    #### Parameters
    
    -   ...values: [CSSNumberish](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CSSNumberish/)\[\]
    
    #### Returns [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/)
    
    Inherited from [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/).[mul](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/#mul)
    

### sub[](#sub)

-   sub(...values: [CSSNumberish](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CSSNumberish/)\[\]): [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/)[](#sub-1)
    
    The **`sub()`** method of the CSSNumericValue interface subtracts a supplied number from the CSSNumericValue.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CSSNumericValue/sub)
    
    #### Parameters
    
    -   ...values: [CSSNumberish](https://docs.maptiler.com/sdk-js/api-reference/types/Externals.CSSNumberish/)\[\]
    
    #### Returns [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/)
    
    Inherited from [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/).[sub](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/#sub)
    

### to[](#to)

-   to(unit: string): CSSUnitValue[](#to-1)
    
    The **`to()`** method of the CSSNumericValue interface converts a numeric value from one unit to another.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CSSNumericValue/to)
    
    #### Parameters
    
    -   unit: string
    
    #### Returns CSSUnitValue
    
    Inherited from [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/).[to](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/#to)
    

### toString[](#tostring)

-   toString(): string[](#tostring-1)
    
    #### Returns string
    
    Inherited from [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/).[toString](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/#tostring)
    

### toSum[](#tosum)

-   toSum(...units: string\[\]): [CSSMathSum](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSMathSum/)[](#tosum-1)
    
    The **`toSum()`** method of the CSSNumericValue interface converts the object's value to a CSSMathSum object to values of the specified unit.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CSSNumericValue/toSum)
    
    #### Parameters
    
    -   ...units: string\[\]
    
    #### Returns [CSSMathSum](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSMathSum/)
    
    Inherited from [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/).[toSum](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/#tosum)
    

### type[](#type)

-   type(): [CSSNumericType](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericType/)[](#type-1)
    
    The **`type()`** method of the CSSNumericValue interface returns the type of CSSNumericValue, one of angle, flex, frequency, length, resolution, percent, percentHint, or time.
    
    [MDN Reference](https://developer.mozilla.org/docs/Web/API/CSSNumericValue/type)
    
    #### Returns [CSSNumericType](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericType/)
    
    Inherited from [CSSNumericValue](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/).[type](https://docs.maptiler.com/sdk-js/api-reference/interfaces/Externals.CSSNumericValue/#type)