Can I pass a value to a CSS function?

Question

I have a speedometer. I would like to show the speed depending on what value was entered in the textbox. Here is the demo. Here is the code, if you would like to browse. The main code where I need to update the value is.

@-webkit-keyframes rotate {
    from {-webkit-transform:rotate(0deg);}
        to {-webkit-transform:rotate(180deg);} <-- I need to update 180deg on the fly
}

In ideal situation, I need to pull this value from a database. But just wondering is there a way to update this field anyhow on the go? May be JavaScirpt?

Speedometer

Note:The demo works only in Safari and Chrome, not in firefox and IE

possible duplicate of programmatically changing webkit-transformation values in animation rules — thirtydot
– thirtydot, Commented Oct 3, 2011 at 13:25

Michiel · Accepted Answer · 2011-10-03 13:20:38Z

1

You can define the syle hardcoded in the HTML file. And change it with a JS declaration in PHP. Not very strict, but it does the trick :)

answered Oct 3, 2011 at 13:20

Michiel

8,12117 gold badges67 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:13:26Z

1

You may wish to try here for some solutions.

Seems as though you will have to write out a whole new CSS rule onto the page in Javascript. Or create numerous classes and change the class with Javascript, but this would not prove practical for you as you would need potentially 360 classes.

edited May 23, 2017 at 12:13

CommunityBot

11 silver badge

answered Oct 3, 2011 at 13:25

Matt Derrick

5,7242 gold badges39 silver badges55 bronze badges

2 Comments

thirtydot Over a year ago

You might want to update that link, at the moment it's pointing to this question :)

Guillaume86 Over a year ago

I got a stackoverflow exception following your link ;)

Guillaume86 · Accepted Answer · 2011-10-03 13:28:15Z

0

You should try to use a css preprocessor like LESS.js or SASS:

http://lesscss.org/

http://sass-lang.com/

answered Oct 3, 2011 at 13:28

Guillaume86

14.4k4 gold badges56 silver badges57 bronze badges

1 Comment

Guillaume86 Over a year ago

less.js seems better if you want to refresh client side.

TheTechGuy · Accepted Answer · 2011-10-11 20:50:31Z

0

My answer: No you can not.

But you can create the whole CSS using PHP. The best bet is to use PHP to generate the entire CSS esp the one you need to modify according to the user settting.

answered Oct 11, 2011 at 20:50

TheTechGuy

17.5k18 gold badges120 silver badges144 bronze badges

Collectives™ on Stack Overflow

Can I pass a value to a CSS function?

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related