0

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

Hassan Bashiri
  • 29
  • 10
  • 2
    What! You mean the above string in whole is the class? –  Jun 24 '16 at 08:16
  • 1
    you need to directly insert the css properties part as a style attribute. – Mohit Bhardwaj Jun 24 '16 at 08:16
  • 2
    How do you mean `add a class to my thml element as a string`? You want to add the _css_ properties _directly_ ? – Angel ofDemons Jun 24 '16 at 08:17
  • the problem is i want to generate a class dynamically then remove it using removeClass – Hassan Bashiri Jun 24 '16 at 08:30
  • You need to add remove stylesheet rule(s), e.g: http://stackoverflow.com/questions/1212500/create-a-css-rule-class-with-jquery-at-runtime. Then add/remove class to specific element. If you want to change rules, then set e.g an ID to appended style tag and overwrite its content – A. Wolff Jun 24 '16 at 08:35
  • Doesn't my [answer](http://stackoverflow.com/a/38008870/6338065) provide that? It _adds_ the class and you can _remove_ the class – Angel ofDemons Jun 24 '16 at 08:36

4 Answers4

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>
Randy
  • 9,419
  • 5
  • 39
  • 56
1

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"});
Randy
  • 9,419
  • 5
  • 39
  • 56
Samir
  • 1,312
  • 1
  • 10
  • 16
  • the problem is i want to generate a class dynamically then remove it using removeClass, if i add it as css its not possible to remove it easly – Hassan Bashiri Jun 24 '16 at 08:31
1

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"});
Gautam Jha
  • 1,445
  • 1
  • 15
  • 24
1

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

Angel ofDemons
  • 1,267
  • 8
  • 13
  • 1
    I think the all point of question is how to write `.step1{transform : translate(10px,10px); transition-duration: 1s;}` dynamically. Maybe OP is coding for a HTML editor or whatever that needs some reusable/editable CSS rules. But that said, the question is completly unclear imho and your answer is the usual way to add/remove to specific element a class or an inline attribute – A. Wolff Jun 24 '16 at 08:45
  • exactly I'm trying to create something like an editor – Hassan Bashiri Jun 24 '16 at 09:00