i
iamt_ps
·Posted in Smart HMI - WebIQ Designer and Server

Change the fill color of an element with Javascript

Hello,

i want to ask if there is a way to change the fill color of an iq-shape Element with the setProperty Command in Javascript. I have tried it with this code but unfortunately it doesn't work:


        const cancelable = shmi.onReady( {
            controls: {
                Kreis: ".Kreis"
            }
        }, function (resolved) {
            resolved.controls.Kreis.shape-svg.setProperty("fill", "#ff0000", "important");
        } );
 
I know, that I could use a Stylesheet to do this but in my project I need to change the color of multiple elements frequently and I don't want to create Stylesheets for all of them if there is a way to do it like this.
 
Thanks for Helping
Best reply by webiq-sk

Thank you, it cannot work the way you did, because you used instance styling which always overrides any custom styling:

It always must override any other styling because it cannot "know" what the user wants (there can only be one winner). If you remove this, then it works as intended.
I also recommend to familiarize yourself with the browser's developer tools as this makes it easy to find out why it doesn't work:

There is no difference here between writing JavaScript in WebIQ or any other website - it's exactly the same here - this explains CSS specificity: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

The information on the instance styling was omitted from the original description so I couldn't provide a sufficient explanation - in the future please always provide all information available - that will make it a lot easier.

You can however override this without removing the instance styling in WebIQ Designer, but this can only be done by setProperty:

//svg.style.fill = '#ff0000';
svg.style.setProperty('fill', '#ff0000', 'important');
 
Then this will work, because of the "important" added.
Also, there's no need to use long objects paths like resolved.controls.circle.element as I already assigned this to the svg variable.
 

 

View original
6 replies