View Full Version : change external stylesheet rules with javascript

10-02-2012, 03:50 PM
So I have been looking around for a good example on changing the rule sets in an external stylesheet.

My main thing is I have a site that uses css3 animations on various different elements. instead of copying and pasting the keyframe animation block over and over again only to have slight changes on the values of the exact same properties. I am looking to make use of just one block that can be made dynamic with javascript.

Here is some code to give you a better idea of what I am after

<div class="block"></div>
<input type="button" onclick="setCss()" />
function setCss(){
// code to set new css rules in the keyframe animation

// code to apply new css rule to <div class="block"></div>
height: 200px;
width: 200px;

-webkit-animation-name: move;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;

@-webkit-keyframes move
// I am looking to change left and top values with javascript here
0% {left:0px; top:0px;}
100% {left:100px; top:0px;}

As I assembling this example I realize this method may interfere with other elements also using the same keyframe animation name. So should I just write this entire keyframe block with javascript when I want to move that element using a unique animation name so it wont effect anything else?
What would be the best way of going about doing this?