Asked  6 Months ago    Answers:  5   Viewed   15 times

Is it possible to make changes to a CSS rule-set dynamically (i.e. some JS which would change a CSS rule-set when the user clicks a widget)

This particular CSS rule-set is applied to lots of elements (via a class selector) on the page and I want to modify it when the user clicks the widget, so that all the elements having the class change.

 Answers

83

You can, but it's rather cumbersome. The best reference on how to do it is the following article: Totally Pwn CSS with Javascript (web archive link).

I managed to get it to work with Firefox and IE - I couldn't in Chrome, though it appears that it supports the DOM methods.ricosrealm reports that it works in Chrome, too.

Tuesday, June 1, 2021
 
Chvanikoff
answered 6 Months ago
85

W3C CSS Transitions Draft

The completion of a CSS Transition generates a corresponding DOM Event. An event is fired for each property that undergoes a transition. This allows a content developer to perform actions that synchronize with the completion of a transition.


Webkit

To determine when a transition completes, set a JavaScript event listener function for the DOM event that is sent at the end of a transition. The event is an instance of WebKitTransitionEvent, and its type is webkitTransitionEnd.

box.addEventListener( 'webkitTransitionEnd', 
    function( event ) { alert( "Finished transition!" ); }, false );

Mozilla

There is a single event that is fired when transitions complete. In Firefox, the event is transitionend, in Opera, oTransitionEnd, and in WebKit it is webkitTransitionEnd.

Opera

There is one type of transition event available. The oTransitionEnd event occurs at the completion of the transition.

Internet Explorer

The transitionend event occurs at the completion of the transition. If the transition is removed before completion, the event will not fire.


Stack Overflow: How do I normalize CSS3 Transition functions across browsers?

Tuesday, June 1, 2021
 
Asnexplore
answered 6 Months ago
75

You could use the cssRules on the DOM stylesheet object corresponding to your original stylesheet to modify your rule.

var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;

rules[0].style.color = 'red';

Note that IE uses rules instead of cssRules.

Here is a demonstration: http://jsfiddle.net/8Mnsf/1/

Friday, June 11, 2021
 
Rudie
answered 6 Months ago
46

It is possible to detect supported CSS properties, provided you're aware in advance of what browser vendor prefixes you need to sniff for. I've written a gist for the mechanism:

https://gist.github.com/1096784

cssSandpaper is a JS library that aims to parse CSS and dynamically implement polyfills for various CSS3 effects:

http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/

There is also a jQuery library that operates in reverse order, and silently implements transitions where possible when you call $.animate():

https://github.com/louisremi/jquery.transition.js

Friday, August 13, 2021
 
jreed121
answered 4 Months ago
49

You can pass any transform property as a string.

HOW?

It can be done like this;

div.style.transform = "translate(x,y)"

I find out that if I write

div.style.transform = "translate(someValue)"

It only affects x axes.

"translate-y(someValue)" or "translate-x(someValue)"

did not work out.

Or you can use rotate property;

div.style.transform = "rotate(50px)".

Try it!

https://jsfiddle.net/araknafobia/4wtxu0dr/1/

Saturday, September 18, 2021
 
Owen
answered 3 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share