Class

# WebStyle

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

## Description

A <span class="title-ref">WebStyle</span> is a collection of methods and properties that manage the look of a user interface elements in your web app.

## Properties

<div class="rst-class">

table-centered_columns_3_and_4

</div>

| Name                                        | Type                                    | Read-Only | Shared |
|---------------------------------------------|-----------------------------------------|-----------|--------|
| `BackgroundColor<webstyle.backgroundcolor>` | `ColorGroup</api/graphics/colorgroup>`  |           |        |
| `Bold<webstyle.bold>`                       | `Boolean</api/data_types/boolean>`      |           |        |
| `BorderColor<webstyle.bordercolor>`         | `ColorGroup</api/graphics/colorgroup>`  |           |        |
| `BorderThickness<webstyle.borderthickness>` | `Integer</api/data_types/integer>`      |           |        |
| `Cursor<webstyle.cursor>`                   | `Cursors<webstyle.cursors>`             |           |        |
| `FontName<webstyle.fontname>`               | `String</api/data_types/string>`        |           |        |
| `FontSize<webstyle.fontsize>`               | `Double</api/data_types/double>`        |           |        |
| `ForegroundColor<webstyle.foregroundcolor>` | `ColorGroup</api/graphics/colorgroup>`  |           |        |
| `Hover<webstyle.hover>`                     | <span class="title-ref">WebStyle</span> |           |        |
| `Italic<webstyle.italic>`                   | `Boolean</api/data_types/boolean>`      |           |        |
| `Opacity<webstyle.opacity>`                 | `Integer</api/data_types/integer>`      |           |        |
| `Pressed<webstyle.pressed>`                 | <span class="title-ref">WebStyle</span> |           |        |
| `Strikethrough<webstyle.strikethrough>`     | `Boolean</api/data_types/boolean>`      |           |        |
| `Underline<webstyle.underline>`             | `Boolean</api/data_types/boolean>`      |           |        |
| `Visited<webstyle.visited>`                 | <span class="title-ref">WebStyle</span> |           |        |

## Methods

<div class="rst-class">

table-centered_column_4

</div>

| Name                                          | Parameters                                                                                                                                                                                                | Returns                                 | Shared |
|-----------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------|--------|
| `AddTransition<webstyle.addtransition>`       | CSSPropertyName As `String</api/data_types/string>`, Duration As `Double</api/data_types/double>`, SpeedPattern As `SpeedPatterns<webstyle.speedpatterns>`, Delay As `Double</api/data_types/double>` = 0 |                                         |        |
| `Clone<webstyle.clone>`                       | deep As `Boolean</api/data_types/boolean>` = `False</api/language/false>`                                                                                                                                 | <span class="title-ref">WebStyle</span> |        |
| `CSSValue<webstyle.cssvalue>`                 | Selector As `String</api/data_types/string>`                                                                                                                                                              | `String</api/data_types/string>`        |        |
| `HasCSSProperty<webstyle.hascssproperty>`     | cssPropertyName As `String</api/data_types/string>`                                                                                                                                                       | `Boolean</api/data_types/boolean>`      |        |
| `Remove<webstyle.remove>`                     | cssPropertyName As `String</api/data_types/string>`                                                                                                                                                       |                                         |        |
| `RemoveTransition<webstyle.removetransition>` | cssPropertyName As `String</api/data_types/string>`                                                                                                                                                       |                                         |        |
| `SubClass<webstyle.subclass>`                 |                                                                                                                                                                                                           | <span class="title-ref">WebStyle</span> |        |
| `Value<webstyle.value>`                       | cssPropertyName As `String</api/data_types/string>`                                                                                                                                                       | `String</api/data_types/string>`        |        |
|                                               | cssPropertyName As `String</api/data_types/string>`, `Assigns</api/language/assigns>` value As `String</api/data_types/string>`                                                                           |                                         |        |

## Enumerations

<div id="webstyle.cursors">

<div class="rst-class">

forsearch

</div>

</div>

WebStyle.Cursors

### Cursors

> All cursors available that can appear when the user hovers over the object.
>
> | Enum            |
> |-----------------|
> | CrossHair       |
> | Default         |
> | Help            |
> | Inherit         |
> | Move            |
> | NoDrop          |
> | None            |
> | NotAllowed      |
> | Pointer         |
> | Progress        |
> | ResizeColumn    |
> | ResizeEast      |
> | ResizeNorth     |
> | ResizeNorthEast |
> | ResizeNorthWest |
> | ResizeRow       |
> | ResizeSouth     |
> | ResizeSouthEast |
> | ResizeSouthWest |
> | ResizeWest      |
> | Text            |
> | VerticalText    |
> | Wait            |

<div id="webstyle.speedpatterns">

<div class="rst-class">

forsearch

</div>

</div>

WebStyle.SpeedPatterns

### SpeedPatterns

> All available speeds at which a transition can occur that can be applies to CSS properties.
>
> | Enum      | Description                                                                    |
> |-----------|--------------------------------------------------------------------------------|
> | Ease      | The pace is constant throughout the transition and is slower than Linear.      |
> | EaseIn    | The pace begins slow then speeds up.                                           |
> | EaseInOut | The pace begins slow then speeds up and then slows back down again at the end. |
> | EaseOut   | The pace slows at the end.                                                     |
> | Linear    | The pace is constant throughout the transition and is faster than Ease.        |

## Property descriptions

<div id="webstyle.backgroundcolor">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

WebStyle.BackgroundColor

**BackgroundColor** As `ColorGroup</api/graphics/colorgroup>`

> The color used to draw the background of the object to which the <span class="title-ref">WebStyle</span> is assigned.

<div id="webstyle.bold">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

WebStyle.Bold

**Bold** As `Boolean</api/data_types/boolean>`

> If `True</api/language/true>` and the object to which the <span class="title-ref">WebStyle</span> is assigned has text, the text will be style in bold.

<div id="webstyle.bordercolor">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

WebStyle.BorderColor

**BorderColor** As `ColorGroup</api/graphics/colorgroup>`

> The color used to draw the border of the object to which the <span class="title-ref">WebStyle</span> is assigned.

<div id="webstyle.borderthickness">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

WebStyle.BorderThickness

**BorderThickness** As `Integer</api/data_types/integer>`

> The thickness of the border of the object to which the <span class="title-ref">WebStyle</span> is assigned.

<div id="webstyle.cursor">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

WebStyle.Cursor

**Cursor** As `Cursors<webstyle.cursors>`

> The cursor displayed when the user hovers over the object to which the <span class="title-ref">WebStyle</span> is assigned.

<div id="webstyle.fontname">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

WebStyle.FontName

**FontName** As `String</api/data_types/string>`

> The font used to for any text in the object to which the <span class="title-ref">WebStyle</span> is assigned.

<div id="webstyle.fontsize">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

WebStyle.FontSize

**FontSize** As `Double</api/data_types/double>`

> The font size used to draw any text in the object to which the <span class="title-ref">WebStyle</span> is assigned.

<div id="webstyle.foregroundcolor">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

WebStyle.ForegroundColor

**ForegroundColor** As `ColorGroup</api/graphics/colorgroup>`

> The color used to draw everything except the border and background of the object to which the <span class="title-ref">WebStyle</span> is assigned.

<div id="webstyle.hover">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

WebStyle.Hover

**Hover** As <span class="title-ref">WebStyle</span>

> The <span class="title-ref">WebStyle</span> to be applied while the mouse is over the control.
>
> This example code sets the control's background to red and sets the <span class="title-ref">Hover</span> style to green so that it will turn green when the mouse is over the control:
>
> ``` xojo
> Me.Style.BackgroundColor = Color.Red
> Me.Style.Hover.BackgroundColor = Color.Green
> ```

<div id="webstyle.italic">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

WebStyle.Italic

**Italic** As `Boolean</api/data_types/boolean>`

> If `True</api/language/true>`, the text of the object to which the <span class="title-ref">WebStyle</span> is assigned will be use the italic style.

<div id="webstyle.opacity">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

WebStyle.Opacity

**Opacity** As `Integer</api/data_types/integer>`

> The level of opacity of the control to which the <span class="title-ref">WebStyle</span> is assigned.
>
> Valid values are 0 (invisible) to 100 (fully opaque).

<div id="webstyle.pressed">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

WebStyle.Pressed

**Pressed** As <span class="title-ref">WebStyle</span>

> The <span class="title-ref">WebStyle</span> to be applied while the control is clicked.
>
> This example code sets the control's background to red and sets the <span class="title-ref">Pressed</span> style to green so that it will turn green when the control is clicked:
>
> ``` xojo
> Me.Style.BackgroundColor = Color.Red
> Me.Style.Pressed.BackgroundColor = Color.Green
> ```

<div id="webstyle.strikethrough">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

WebStyle.Strikethrough

**Strikethrough** As `Boolean</api/data_types/boolean>`

> If `True</api/language/true>`, the text of the object to which the <span class="title-ref">WebStyle</span> is assigned will be use the strikethrough style.

<div id="webstyle.underline">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

WebStyle.Underline

**Underline** As `Boolean</api/data_types/boolean>`

> If `True</api/language/true>`, the text of the object to which the <span class="title-ref">WebStyle</span> is assigned will be use the underline style.

<div id="webstyle.visited">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

WebStyle.Visited

**Visited** As <span class="title-ref">WebStyle</span>

> The <span class="title-ref">WebStyle</span> to be applied after a `Weblink</api/user_interface/web/weblink>` control is clicked.

## Method descriptions

<div id="webstyle.addtransition">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

WebStyle.AddTransition

**AddTransition**(CSSPropertyName As `String</api/data_types/string>`, Duration As `Double</api/data_types/double>`, SpeedPattern As `SpeedPatterns<webstyle.speedpatterns>`, Delay As `Double</api/data_types/double>` = 0)

> Adds a transition with the values passed.
>
> The transition is triggered when the property whose name was passed is modified in another event. The transition will then be from the previous value to the new value.
>
> The default SpeedPattern is EaseInOut.
>
> Because **WebStyles** use CSS under the hood, there are [many CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties) that can be animated.

<div id="webstyle.clone">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

WebStyle.Clone

**Clone**(deep As `Boolean</api/data_types/boolean>` = `False</api/language/false>`) As <span class="title-ref">WebStyle</span>

> Returns a copy of the <span class="title-ref">WebStyle</span>.
>
> If *deep* is `True</api/language/true>` the copy will have the any values inherited from <span class="title-ref">WebStyle</span>'s <span class="title-ref">WebStyle</span> parent instances.

<div id="webstyle.cssvalue">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

WebStyle.CSSValue

**CSSValue**(Selector As `String</api/data_types/string>`) As `String</api/data_types/string>`

> Returns the value of the CSS Selector whose name is passed.

<div id="webstyle.hascssproperty">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

WebStyle.HasCSSProperty

**HasCSSProperty**(cssPropertyName As `String</api/data_types/string>`) As `Boolean</api/data_types/boolean>`

> Returns `True</api/language/true>` if <span class="title-ref">WebStyle</span> has a CSS property with name passed.

<div id="webstyle.remove">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

WebStyle.Remove

**Remove**(cssPropertyName As `String</api/data_types/string>`)

> Removes the value of the CSS Selector whose name is passed.

<div id="webstyle.removetransition">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

WebStyle.RemoveTransition

**RemoveTransition**(cssPropertyName As `String</api/data_types/string>`)

> Removes the transition for the property whose name is passed.

<div id="webstyle.subclass">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

WebStyle.SubClass

**SubClass** As <span class="title-ref">WebStyle</span>

> Returns a subclass of the <span class="title-ref">WebStyle</span>.
>
> The returned <span class="title-ref">WebStyle</span> inherits the values of the <span class="title-ref">WebStyle</span> from which it was created.

<div id="webstyle.value">

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

</div>

<div class="rst-class">

forsearch

</div>

WebStyle.Value

**Value**(cssPropertyName As `String</api/data_types/string>`) As `String</api/data_types/string>`

> Returns the value of the CSS Selector whose name was passed.

**Value**(cssPropertyName As `String</api/data_types/string>`, `Assigns</api/language/assigns>` value As `String</api/data_types/string>`)

> Sets the CSS Selector whose name is passed to the *value* assigned.

## Notes

A <span class="title-ref">WebStyle</span> can be applied to any object that has a <span class="title-ref">WebStyle</span> property.

You can create <span class="title-ref">WebStyle</span> objects that are subclasses of an existing <span class="title-ref">WebStyle</span> using the `SubClass<webstyle.subclass>` method. A subclass inherits all of the values of the parent object and can then override any of those values.

## Sample code

There are many [CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties) that can be animated.

This code in a `WebRectangle's Opening<webcontrol.opening>` event adds a transition that will change the width of the `WebRectangle</api/user_interface/web/webrectangle>`. It then stores the width of the `WebRectangle</api/user_interface/web/webrectangle>` in the style's width property. This is done so that when the transition is triggered later by modifying the width, the width stored in the width property of the <span class="title-ref">WebStyle</span> will match that of the `WebRectangle</api/user_interface/web/webrectangle>` being animated:

``` xojo
Me.Style.AddTransition("width", 5, WebStyle.SpeedPatterns.EaseInOut, 0)
Me.Style.Value("width") = Me.Width.ToString + "px"
```

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

The transition animation of the width of the `WebRectangle</api/user_interface/web/webrectangle>` is then triggered by changing the width value to a new value:

``` xojo
Var currentWidth As Integer = Rectangle1.Style.Value("width").ToInteger
currentWidth = currentWidth + 600
Rectangle1.Style.Value("width") = currentWidth.ToString + "px"
```

## Compatibility

|                       |     |
|-----------------------|-----|
| **Project Types**     | Web |
| **Operating Systems** | All |

<div class="seealso">

`Object</api/data_types/additional_types/object>` parent class; `WebUIControl</api/user_interface/web/webuicontrol>` class and its subclasses

</div>