# CSS SetProperty **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [August 29, 2024, 12:54pm UTC](https://forum.inductiveautomation.com/t/css-setproperty/95316 "2024-08-29T12:54:36Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![Wesley\_Waters1](https://avatars.discourse-cdn.com/v4/letter/w/4bbf92/32.png) [@Wesley\_Waters1](https://forum.inductiveautomation.com/u/Wesley_Waters1)\ **Post date:** [August 29, 2024, 12:54pm UTC](https://forum.inductiveautomation.com/t/css-setproperty/95316/1 "2024-08-29T12:54:36Z")
I am trying to find a way in perspective to change the value of a css variable. ```python :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? ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [August 29, 2024, 12:57pm UTC](https://forum.inductiveautomation.com/t/css-setproperty/95316/2 "2024-08-29T12:57:07Z")
You mean you want to change that variable's value at runtime ? Why ? ---
**Author:** ![Wesley\_Waters1](https://avatars.discourse-cdn.com/v4/letter/w/4bbf92/32.png) [@Wesley\_Waters1](https://forum.inductiveautomation.com/u/Wesley_Waters1)\ **Post date:** [August 29, 2024, 1:05pm UTC](https://forum.inductiveautomation.com/t/css-setproperty/95316/3 "2024-08-29T13:05:51Z")
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. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [August 29, 2024, 1:08pm UTC](https://forum.inductiveautomation.com/t/css-setproperty/95316/4 "2024-08-29T13:08:50Z")
You should use different classes. Its possible to do in js, but this would not be a usecase for it imho ---
**Author:** ![Wesley\_Waters1](https://avatars.discourse-cdn.com/v4/letter/w/4bbf92/32.png) [@Wesley\_Waters1](https://forum.inductiveautomation.com/u/Wesley_Waters1)\ **Post date:** [August 29, 2024, 1:10pm UTC](https://forum.inductiveautomation.com/t/css-setproperty/95316/5 "2024-08-29T13:10:37Z")
Is there a way to run javascript in Ignition? ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [August 29, 2024, 1:11pm UTC](https://forum.inductiveautomation.com/t/css-setproperty/95316/6 "2024-08-29T13:11:34Z")
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... ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [August 29, 2024, 1:12pm UTC](https://forum.inductiveautomation.com/t/css-setproperty/95316/7 "2024-08-29T13:12:45Z")
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 > [@Styling Perspective Tree branches?](https://forum.inductiveautomation.com/t/styling-perspective-tree-branches/86074/5): > > yeah scripts dont run on load like this, thats why i wrap my scripts in the onload of an img object code = """\\""".replace("\n", "").replace("\t", "") return code Do note that the added a css sheet will not disspear, when closing the view, and if you open a new view a second css sheet will be made... (i think) Css sheets also can get cached, so this might turn out ugly after a while. Its better to ju… > [@On JavaScript injection in markdown component](https://forum.inductiveautomation.com/t/on-javascript-injection-in-markdown-component/92718/2): > > Take a look at some of my posts, i do a bunch of stuff with markdown js. There is a lot more you can do with this. With some string replace, i fixed the space/tab formatting issues, allowing you to code a bit more cleanly. Using an img' onload function you can trigger anything screen wide, With some mutation observers you can trigger stuff on data changes (quite advanced js knowledge required). With window.\_\_client, you can access perspective properties and even write to them ect. (i… ---
**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\ **Post date:** [August 29, 2024, 1:15pm UTC](https://forum.inductiveautomation.com/t/css-setproperty/95316/8 "2024-08-29T13:15:56Z")
I really, REALLY advise you don't do that just to change css variables. ---
**Author:** ![Wesley\_Waters1](https://avatars.discourse-cdn.com/v4/letter/w/4bbf92/32.png) [@Wesley\_Waters1](https://forum.inductiveautomation.com/u/Wesley_Waters1)\ **Post date:** [August 29, 2024, 1:19pm UTC](https://forum.inductiveautomation.com/t/css-setproperty/95316/9 "2024-08-29T13:19:45Z")
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. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [August 29, 2024, 1:23pm UTC](https://forum.inductiveautomation.com/t/css-setproperty/95316/10 "2024-08-29T13:23:04Z")
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 🙂