How to change the color of a Text?

Ask the community
,
1

Hello Velo community! I need your help once again.

This is my first time coding and I’m stuck on one bit - hope one of y’all can help me with it.

I wanted to change the color of the text and the background color of the column that the text is in on ViewportEnter. So I used the following code:

$w("#section2col1title1").onViewportEnter( (event) => {
     
  $w("#column64").style.backgroundColor = "rgba(255,0,0,1)";
  $w("#text83").style.color = "rgba(0,0,255,1)";
  
});

But it shows a red underline in Style and says "Property ‘Style’ does not exist on type ‘Text’.

Can somebody help me figure out what to put in place of .style?

Thanks! (:

2

Any idea on how to do this guys?

3

There is NO style-property to be found as command, when working with code.

What you can do is the following…

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

This also could be intereseting for you…

4

Thanks @russian-dima !

I have a question: What if I want to add a custom HEX code instead of the pre-defined red? Is there a way to do that?

5

@pratham Same way.

6

@jonatandor35 Thank you!

7

@russian-dima Hello,

I tried adding the code but the color isn’t changing. It still remains the same as it was before

8

@pratham
Please show your current used code.

9

that works… but why does it change the font and size to small? any way to keep the current font when doing this?

10

export function input21_change ( event ) {
history4 = ( Number ( $w ( “#input20” ). value ))-( Number ( $w ( “#input21” ). value ));
$w ( “#text33” ). text = history4 . toString ();
if ( history4 === 0 ) {
$w ( “#text33” ). html = <p style = "color: red"> ${ $w ( "#text33" ). text } </p> ;
}
console . log ( “history4” );
}

I just need the color to change… not all the properties.

11

This is my code. Works for my purpose, until Wix decides to change something and break it. Took me some time, don’t even remeber exactly what it does (I do remember it removes all color before applying a new one)

export function ChangeTextColor(textToChange, newColor)
{
	newColor = newColor.replace(/\s/g, '' );

	const sanitizePattern = /(font-size:[0-9 ]*[., ]*[0-9 ]*px\s*;\s*color:\s*rgba\(\s*[0-9]{1,3}\s*,\s*[0-9]{1,3}\s*,\s*[0-9]{1,3}\s*,(1\s*\)|0\s*\)|\s*0[.][0-9]{1,3}\s*\)|1[.][0]{1,3}\s*\)))|(font-size:[0-9 ]*[., ]*[0-9 ]*px\s*;\s*color:\s*#[a-fA-F0-9]{6})/gi;
	const sanitizeRemoveWixColorClass = /color_[0-9a-zA-Z]*\s*/gi
	const fontPattern = /font-size:[0-9 ]*[., ]*[0-9 ]*px/gi;
	const colorPattern = /color:\s*#[a-fA-F0-9]{6}/gi;
	const colorPatternRgba = /color:\s*rgba\(\s*[0-9]{1,3}\s*,\s*[0-9]{1,3}\s*,\s*[0-9]{1,3}\s*,(1\s*\)|0\s*\)|\s*0[.][0-9]{1,3}\s*\)|1[.][0]{1,3}\s*\))/gi;
	let tempText = textToChange.html;

	//sanitize remove wix color class
	let matchExp = Array.from(tempText.matchAll(sanitizeRemoveWixColorClass), m => m[0]);
	matchExp = matchExp.flatMap(m => m);
	matchExp = [...new Set(matchExp)];

	matchExp.forEach(match => tempText = tempText.replaceAll(match, ""));

	//sanitize
	matchExp = Array.from(tempText.matchAll(sanitizePattern), m => m[0]);
	matchExp = matchExp.flatMap(m => m);
	matchExp = [...new Set(matchExp)];

	matchExp.forEach(match => tempText = tempText.replaceAll(match, match.match(fontPattern)));

	//color:rgba(1,1,1,1)
	matchExp = Array.from(tempText.matchAll(colorPatternRgba), m => m[0]);
	matchExp = matchExp.flatMap(m => m);
	matchExp = [...new Set(matchExp)];

	matchExp.forEach(match => tempText = tempText.replaceAll(match, "color:" + newColor));

	//color:#AAAAAA
	matchExp = Array.from(tempText.matchAll(colorPattern), m => m[0]);
	matchExp = matchExp.flatMap(m => m);
	matchExp = [...new Set(matchExp)];

	matchExp.forEach(match => tempText = tempText.replaceAll(match, "color:" + newColor));

	//font-size:1px
	matchExp = Array.from(tempText.matchAll(fontPattern), m => m[0]);
	matchExp = matchExp.flatMap(m => m);
	matchExp = [...new Set(matchExp)];

	matchExp.forEach(match => tempText = tempText.replaceAll(match, match + "; color:" + newColor));

	textToChange.html = tempText;
}