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
Select the element you want to style using the $w selector function.
Access the element's style object using the .style property.
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.
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.
https://www.wix.com/code/home/forum/questions-answers/why-does-changing-html-destroy-anchor-href-attribute
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?
Oh this is a great step. Thanks.
Love it!! Thank you @Yoav!
HYyyuuuuge
Great!