如何使用javascript将类添加为元素的字符串？

Question

how can I add a class to my html element as a string

like this:

'.step1{transform : translate(10px,10px); transition-duration: 1s;}'

I've tried jquery addClass but it takes only the class name not a string as the whole class.

the problem is i want to generate a class dynamically then remove it using removeClass, if i add it as css it's not possible to remove it easly

Answer 1

This should do the trick. If you hover the second box, the first one moves.

 $('.two').mouseenter(function(){ $('.one').addClass('move'); }); $('.two').mouseleave(function(){ $('.one').removeClass('move'); }); 

 .one, .two { background-color:green; width:100px; height:100px; transition-duration: 1s; } .two { background-color:red; } .move { transform: translate(100px, 100px); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='one'> </div> <div class='two'> </div> 

Answer 2

This might help you, This will not add any class , it will directly add the styling to the div . addClass() / removeClass() will only use for adding/removing the class . The parameter passing inside this will be a class name.

$('.targetDiv').CSS({"transform" : "translate(10px,10px)", "transition-duration": "1s"});

Answer 3

If you are already using Jquery then use css() function Know more here

i hope it helps.

$(".step1").css({"transform": "translate(10px,10px)", "transition-duration": "1s"});

Answer 4

I've added two examples.
One with adding a class to the div and placing the style in it. or I've added a Jquery function that applies the css to the div without adding a class.

jsfiddle here

 $('#add_class').on('click', function(){ $("#my_first_div").addClass("step1"); }); $("#add_css").on('click', function(){ $("#my_first_div").css("transform", "translate(10px,10px)"); $("#my_first_div").css("transition-duration", "1s"); }); $("#reset").on('click', function(){ $("#my_first_div").removeClass("step1"); $("#my_first_div").css("transform", "translate(0px,0px)"); $("#my_first_div").css("transition-duration", "1s"); }); 

 #my_first_div { color:red; } .step1{transform : translate(10px,10px); transition-duration: 1s;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <div id="my_first_div"> my div </div> <br /><br /><button id="add_class"> add class </button> <button id="add_css"> add css </button> <button id="reset"> reset </button> 

explanation: with the addClass event a class will be added to the div and applies the style that is in the css documentation addclass

and how to remove the class

With the css event a css style will be applied to the div without setting it in the css you can see an example and documentation here