Variable in CSS Stylesheets

[David08]

Hello,

Is it possible to use a general variable of HMI, that by means of an action when clicking on a widget modifies the value in HTML5 colour code and in the Stylesheets the value is modified and the colour is applied?
For example click on an image and write value in a string variable #F22, which is a colour in Hexadecimal and this variable read in a stylesheet and change the colour of the object.

Thanks.

[webiq-sk]

In CSS you do not *change* definitions, you override them with additional CSS code. In WebIQ you usually use CSS Modifiers for that: https://www.smart-hmi.com/user/download/deliver/docs/documentation-manual-webiq-designer-2.15-ee64/i... 

If you really want to do dynamic inline styling of an HTML element (do you really need it to be totally flexible to use any of 16.7 million colors?) then you can simply write a LocalScript that sets the style of an HTML element directly with Vanilla JS: https://www.geeksforgeeks.org/how-to-change-the-color-of-html-element-in-javascript/

Please note that WebIQ does nothing with your CSS and JavaScript and sends it unmodified to the browser so you can do anything here that you can do on any other website.

Once again: on websites you don't modify CSS dynamically, you override existing CSS by a more specific or !important selector.

[HmiGuide · Accepted solution]

If I understand the question correctly, CSS variables are a possible solution for your question. Whether this makes sense for your application, you must decide on the basis of webiq-sk's remark. We use this mechanism in the template for cartesian handling system  to make the colours of the widgets editable at runtime. (Light, dark & customer specific design)

Below some basic infos. For more info see: Using_CSS_custom_properties 

Css variables
- can be used in CSS
- be read and written via JS
- Names must start with "--" e.g. "--my-var"

CSS example with variable
.one {
background-color: var(--my-var);
}
// get variable
let sVal = getComputedStyle(document.documentElement).getPropertyValue("--my-var")

// set variable
document.documentElement.style.setProperty("--my-var", "#FFAA00");

[HmiGuide]

Example project version 2.15.7 attached

[webiq-sk]

As pointed out by @HmiGuide you can of course use CSS variables, but still need to override the existing CSS selectors anyway, because WebIQ does not currently use CSS variables (which will change in 2.16 though).