CSS SetProperty

I am trying to find a way in perspective to change the value of a css variable.

:root{
--nav-color:#000000;
}

If I want to change the value of --nav-color to:#FF0000; later in javascript I can use the SetProperty method.. Is there a way to do this in Ignition?

You mean you want to change that variable's value at runtime ?
Why ?

Yes to change it at runtime. The css reacts to variable changes and I want to be able to use a variable for the width of a component.

:root{
example-component-width:30px
}

Later I want to be able to change the width to a different width. I guess I can just create two different classes and add/remove those classes. However my preference is to be able to change the variable value.

You should use different classes.
Its possible to do in js, but this would not be a usecase for it imho

2 Likes

Is there a way to run javascript in Ignition?

Use different classes.

But what's the use case ? When do you want something to change like that ? Looks to me like there would be a better way...

Yes you can use a markdown, or insert some js file in "injectables"

Check some of me posts, i have done tons of things with it.

Im basicly the guy who invented js in perspective xD
BUT even i am telling you to just use classes for this, so yh

3 Likes

I really, REALLY advise you don't do that just to change css variables.

1 Like

I get that there is a simpler way to change a style by adding/removing classes to a component. However, I was just oversimplifying what I am wanting to do to get the base question answered. In most cases I agree that adding/removing a class is a much simpler and more elegant solution. Thank you everyone for the advice/information. I plan on adding/removing classes for most cases I just wanted to know if there was a way to do it if I need to do it at some point.

1 Like

Feel free to ask for the more specifiek things you need to do, i've already solved tons of things with js and css.

But its unsupported, so really should be last resort :slight_smile:

1 Like