New API: Styling Elements

Show and tell
, ,
1

We are excited to announce that many page elements now expose a style property. You can use the style property to programmatically change the appearance of your page elements.
The elements that expose a style property are:

  • Box

  • Button

  • Checkbox

  • Dropdown

  • Footer

  • Header

  • RadioButtonGroup

  • TextBox

  • TextInput

  • UploadButton
    The styles that you can use are:

  • backgroundColor

  • borderColor

  • borderRadius

  • borderWidth

  • color
    Note: The elements listed above only expose the style properties that are relevant to their design.

How it works

  1. Select the element you want to style using the $w selector function.

  2. Access the element’s style object using the .style property.

  3. Get or set the value of one of the style object’s properties.

Example

Here we set the background color of a box to be a semi-transparent red.

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

Learn more

To learn more, see the StyleMixin in the API reference.

7 Likes
2

Great!

3

HYyyuuuuge

4

Love it!! Thank you @Yoav!

5

Oh this is a great step. Thanks.

6

Good move. The more of the DOM we can control the better (from our perspective at least).

Could we also change the colour of vector shapes?

7

I had hoped I could change the styling of text but now I realise TextBox is an input element. I know I’m supposed to be able to edit the HTML of $w.Text but that functionality is still broken.