0

Update style with a button

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

NouserTag gravatar image 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!

delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted
0

answered 2021-04-06 10:00:21 +0800

cor3000 gravatar image cor3000
5833 2 7
ZK Team

updated 2021-04-06 10:01:36 +0800

I tested your exact example on zkfiddle, where it works as implemented. Here a screenshot of the div element after clicking the "Submit-button.

image description

As you can see the --angulo- variable was updated to 100deg. Do you get any different result?

Which exact ZK/browser version are you using? (I used the latest chrome with ZK 9.5.1.1, you can change the ZK version before running the zkfiddle).

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
2 followers

RSS

Stats

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

Seen: 7 times

Last updated: Apr 06

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More