$w.Style

$w.Style

An object representing an element's styles.

Contents

backgroundColor Sets or gets the background color of an element.
borderColor Sets or gets the border color of an element.
borderRadius Sets or gets the border radius of an element.
borderWidth Sets or gets the border width of an element.
color Sets or gets the text color of an element.
backgroundColor

backgroundColor

Sets or gets the background color of an element.

Syntax

get backgroundColor(): string
set backgroundColor(rgbaColor: string): void

Description

The background color value is a string representing an rgbaColor in one of the following formats:

  • "red" - One of 140 predefined color names.
  • "#FF0000" - A hexidecimal rgb color value.
  • "rgb(255,0,0)" - An rgb() function color value.
  • "#FF000000" - A hexidecimal rgba color value.
  • "rgba(255,0,0,1.0)" - An rgba() function color value.

Type

String

Examples

Set the background color

JHcoIiNteUVsZW1lbnQiKS5zdHlsZS5iYWNrZ3JvdW5kQ29sb3IgPSAicmdiYSgyNTUsMCwwLDAuNSkiOwo=
$w("#myElement").style.backgroundColor = "rgba(255,0,0,0.5)";

Get the background color

bGV0IGJnQ29sb3IgPSAkdygiI215RWxlbWVudCIpLnN0eWxlLmJhY2tncm91bmRDb2xvcjsK
let bgColor = $w("#myElement").style.backgroundColor;
borderColor

borderColor

Sets or gets the border color of an element.

Syntax

get borderColor(): string
set borderColor(rgbaColor: string): void

Description

The border color value is a string representing an rgbaColor in one of the following formats:

  • "red" - One of 140 predefined color names.
  • "#FF0000" - A hexidecimal rgb color value.
  • "rgb(255,0,0)" - An rgb() function color value.
  • "#FF000000" - A hexidecimal rgba color value.
  • "rgba(255,0,0,1.0)" - An rgba() function color value.

Type

String

Examples

Set the border color

JHcoIiNteUVsZW1lbnQiKS5zdHlsZS5ib3JkZXJDb2xvciA9ICJyZ2JhKDI1NSwwLDAsMC41KSI7Cg==
$w("#myElement").style.borderColor = "rgba(255,0,0,0.5)";

Get the border color

bGV0IGJvcmRlckNvbG9yID0gJHcoIiNteUVsZW1lbnQiKS5zdHlsZS5ib3JkZXJDb2xvcjsK
let borderColor = $w("#myElement").style.borderColor;
borderRadius

borderRadius

Sets or gets the border radius of an element.

Syntax

get borderRadius(): string
set borderRadius(radius: string): void

Description

The border radius value is a string representing the element's border radius in pixels. For example, "1px".

Type

String

Examples

Set the border radius

JHcoIiNteUVsZW1lbnQiKS5zdHlsZS5ib3JkZXJSYWRpdXMgPSAiMXB4IjsK
$w("#myElement").style.borderRadius = "1px";

Get the border radius

bGV0IGJvcmRlclJhZGl1cyA9ICR3KCIjbXlFbGVtZW50Iikuc3R5bGUuYm9yZGVyUmFkaXVzOyAvLyAiMXB4Igo=
let borderRadius = $w("#myElement").style.borderRadius; // "1px"
borderWidth

borderWidth

Sets or gets the border width of an element.

Syntax

get borderWidth(): string
set borderWidth(width: string): void

Description

The border width value is a string representing the element's border width in pixels. For example, "1px".

Type

String

Examples

Set the border width

JHcoIiNteUVsZW1lbnQiKS5zdHlsZS5ib3JkZXJXaWR0aCA9ICIxcHgiOwo=
$w("#myElement").style.borderWidth = "1px";

Get the border width

bGV0IGJvcmRlcldpZHRoID0gJHcoIiNteUVsZW1lbnQiKS5zdHlsZS5ib3JkZXJXaWR0aDsgLy8gIjFweCIK
let borderWidth = $w("#myElement").style.borderWidth; // "1px"
color

color

Sets or gets the text color of an element.

Syntax

get color(): string
set color(rgbColor: string): void

Description

The text color value is a string representing an rgbColor in one of the following formats:

  • "red" - One of 140 predefined color names.
  • "#FF0000" - A hexidecimal rgb color value.
  • "rgb(255,0,0)" - An rgb() function color value.

Type

String

Examples

Set the text color

JHcoIiNteUVsZW1lbnQiKS5zdHlsZS5jb2xvciA9ICJyZ2IoMjU1LDAsMCkiOwo=
$w("#myElement").style.color = "rgb(255,0,0)";

Get the text color

bGV0IGNvbG9yID0gJHcoIiNteUVsZW1lbnQiKS5zdHlsZS5jb2xvcjsK
let color = $w("#myElement").style.color;