$w.Style

Ask the community
,
1

Can someone help me understand. I’ve read the API documentation for $w.Style here (Style - Velo API Reference - Wix.com) but I cannot seem to style an element. It’s a text element (#text1). I try;

$w("#text1").style.color = "rgba(255,0,0)";

however in the IDE I have a warning “‘style’ does not exist on ‘#text1’”. The API documentation does not list specific object this is exposed on, unless i’ve missed it?

I simply want to change the color of a text element in wix code without hacking HTML as the contents of the text element is connected to a dataset element.

What am I missing here?

2

Hi Jamie!

The API you’re following is for elements with text.
The way to change a text element is by HTML and you can find a more relevant API here .

Your code should look something like this:

$w("#text1").html = `<p style = "color:red"> ${$w("#text1").text}</p>`;

Hope it helps!

Doron. :slight_smile:

3

Thanks for clearing this up Doron. It would be nice if the API documentation explicitly listed what elements $w.Style worked with.

It just feels odd to me that this is basically the only instance where HTML can be manipulated in Wix, it just feels like a bit of a hack. Being able to interact with the element object’s attributes would feel more in-line with the rest of the API.

Anyways, again, thanks for clearing this up :slight_smile:

4

Hi Jamie,

I had the same question as you.

You won’t have to write a HTML code if you use the Wix Code API:
$w(" #button1 “).style.color = “rgba(255,0,0,1.0)”;
$w(” #button1 ").style.color = “rgb(255,0,0)”;

Here’s a website with API documentation and reference examples for changing button style in Wix.
https://www.vorbly.com/Vorbly-Code/WIX-CODE-CUSTOMIZE-BUTTON-STYLE

Hope it helps!

Cheers,
Ben

5

Hi Ben,

Thanks or your response. As Doron pointed out, text elements cannot be styled using $w.Style, which is what my questions was regarding. Button elements, like in your example, can be styled using the $w.Style API.

Jamie

6

I know you know this Doron, if you’re still around.

Sadly you need to know this to know that .style cannot affect text boxes, and as others have said the API is not exactly clear on this point (see below).

This is a two year old thread, which somehow is open, it follows an API clear up where this issue remains.

And I’m slightly frustrated as I just lost two hours over the same problem.

So I’m wondering, is there a way that the Corvid community can point these things out beyond API feedback? At least we’d raise the most critical snafus?

794×553 108 KB