# Class: Style

This documentation is for OpenLayers v10.9.0. The latest is v.

## ol/style/Style~Style

    import Style from 'ol/style/Style.js';

Container for vector feature rendering styles. Any changes made to the style or its children through `set*()` methods will not take effect until the feature or layer that uses the style is re-rendered.

## Feature styles

If no style is defined, the following default style is used:

     import {Circle, Fill, Stroke, Style} from 'ol/style.js';

     const fill = new Fill({
       color: 'rgba(255,255,255,0.4)',
     });
     const stroke = new Stroke({
       color: '#3399CC',
       width: 1.25,
     });
     const styles = [
       new Style({
         image: new Circle({
           fill: fill,
           stroke: stroke,
           radius: 5,
         }),
         fill: fill,
         stroke: stroke,
       }),
     ];

A separate editing style has the following defaults:

     import {Circle, Fill, Stroke, Style} from 'ol/style.js';

     const styles = {};
     const white = [255, 255, 255, 1];
     const blue = [0, 153, 255, 1];
     const width = 3;
     styles['Polygon'] = [
       new Style({
         fill: new Fill({
           color: [255, 255, 255, 0.5],
         }),
       }),
     ];
     styles['MultiPolygon'] =
         styles['Polygon'];
     styles['LineString'] = [
       new Style({
         stroke: new Stroke({
           color: white,
           width: width + 2,
         }),
       }),
       new Style({
         stroke: new Stroke({
           color: blue,
           width: width,
         }),
       }),
     ];
     styles['MultiLineString'] = styles['LineString'];

     styles['Circle'] = styles['Polygon'].concat(
       styles['LineString']
     );

     styles['Point'] = [
       new Style({
         image: new Circle({
           radius: width * 2,
           fill: new Fill({
             color: blue,
           }),
           stroke: new Stroke({
             color: white,
             width: width / 2,
           }),
         }),
         zIndex: Infinity,
       }),
     ];
     styles['MultiPoint'] =
         styles['Point'];
     styles['GeometryCollection'] =
         styles['Polygon'].concat(
             styles['LineString'],
             styles['Point']
         );

#### new Style(options)

style/Style.js, line 162

  Name | Type | Description
  --- | --- | ---
  `geometry` | string | Geometry | GeometryFunction | undefined | Feature property or geometry or function returning a geometry to render for this style.
  `fill` | Fill | undefined | Fill style.
  `image` | ImageStyle | undefined | Image style.
  `renderer` | RenderFunction | undefined | Custom renderer. When configured, `fill`, `stroke` and `image` will be ignored, and the provided function will be called with each render frame for each geometry.
  `hitDetectionRenderer` | RenderFunction | undefined | Custom renderer for hit detection. If provided will be used in hit detection rendering.
  `stroke` | Stroke | undefined | Stroke style.
  `text` | Text | undefined | Text style.
  `zIndex` | number | undefined | Z index.

### Methods

#### clone(){Style}

style/Style.js, line 236

  Clones the style.

  ##### Returns:

  The cloned style.

#### getFill(){Fill | null}

style/Style.js, line 320

  Get the fill style.

  ##### Returns:

  Fill style.

#### getGeometry(){string | Geometry | GeometryFunction | null}

style/Style.js, line 301

  Get the geometry to be rendered.

  ##### Returns:

  Feature property or geometry or function that returns the geometry that will be rendered with this style.

#### getGeometryFunction(){GeometryFunction}

style/Style.js, line 311

  Get the function used to generate a geometry for rendering.

  ##### Returns:

  Function that is called with a feature and returns the geometry to render instead of the feature's geometry.

#### getHitDetectionRenderer(){RenderFunction | null}

style/Style.js, line 290

  Get the custom renderer function that was configured with `#setHitDetectionRenderer` or the `hitDetectionRenderer` constructor option.

  ##### Returns:

  Custom renderer function.

#### getImage(){ImageStyle | null}

style/Style.js, line 338

  Get the image style.

  ##### Returns:

  Image style.

#### getRenderer(){RenderFunction | null}

style/Style.js, line 260

  Get the custom renderer function that was configured with `#setRenderer` or the `renderer` constructor option.

  ##### Returns:

  Custom renderer function.

#### getStroke(){Stroke | null}

style/Style.js, line 356

  Get the stroke style.

  ##### Returns:

  Stroke style.

#### getText(){Text | null}

style/Style.js, line 374

  Get the text style.

  ##### Returns:

  Text style.

#### getZIndex(){number | undefined}

style/Style.js, line 392

  Get the z-index for the style.

  ##### Returns:

  ZIndex.

#### setFill(fill)

style/Style.js, line 329

  Set the fill style.

  Name | Type | Description
  --- | --- | ---
  `fill` | Fill | null | Fill style.

#### setGeometry(geometry)

style/Style.js, line 404

  Set a geometry that is rendered instead of the feature's geometry.

  Name | Type | Description
  --- | --- | ---
  `geometry` | string | Geometry | GeometryFunction | null | Feature property or geometry or function returning a geometry to render for this style.

#### setHitDetectionRenderer(renderer)

style/Style.js, line 280

  Sets a custom renderer function for this style used in hit detection.

  Name | Type | Description
  --- | --- | ---
  `renderer` | RenderFunction | null | Custom renderer function.

#### setImage(image)

style/Style.js, line 347

  Set the image style.

  Name | Type | Description
  --- | --- | ---
  `image` | ImageStyle | Image style.

#### setRenderer(renderer)

style/Style.js, line 270

  Sets a custom renderer function for this style. When set, `fill`, `stroke` and `image` options of the style will be ignored.

  Name | Type | Description
  --- | --- | ---
  `renderer` | RenderFunction | null | Custom renderer function.

#### setStroke(stroke)

style/Style.js, line 365

  Set the stroke style.

  Name | Type | Description
  --- | --- | ---
  `stroke` | Stroke | null | Stroke style.

#### setText(text)

style/Style.js, line 383

  Set the text style.

  Name | Type | Description
  --- | --- | ---
  `text` | Text | Text style.

#### setZIndex(zIndex)

style/Style.js, line 429

  Set the z-index.

  Name | Type | Description
  --- | --- | ---
  `zIndex` | number | undefined | ZIndex.