Update style with a button

asked 2021-04-05 08:29:57 +0800

NouserTag
1 ● 1

updated 2021-04-05 09:04:55 +0800

Hi,

I whould like to make a simple program that would change the style of the div everytime I clik on a button, the style is saved in a style tag.

<div sclass="sc-percentage" id="percentagem" style="--angulo: 20deg;" ></div>

This line works fine, the problem is the next one:

<button id="ok" label="Submit" >
  <attribute name="onClick">
     percentagem.setStyle("--angulo: 100deg;");
  </attribute>
</button>

It simply remove the style from the div, I checked that with the html code on the browser.

(If this helps)

<style>
   .sc-percentage { position:absolute; top:100px; left:-200%; width:400%; height:400%; margin-left:100px; background-color:#ef0000; }
    .sc-percentage { transform:rotate(var(--angulo)); transform-origin:top center; }
</style>

Thanks for the help in advance!