how can i add class to an element as string with 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

you need to directly insert the css properties part as a style attribute. — Mohit Bhardwaj
– Mohit Bhardwaj, Commented Jun 24, 2016 at 8:16
How do you mean add a class to my thml element as a string? You want to add the css properties directly ? — Angel ofDemons
– Angel ofDemons, Commented Jun 24, 2016 at 8:17
the problem is i want to generate a class dynamically then remove it using removeClass — Hassan Bashiri
– Hassan Bashiri, Commented Jun 24, 2016 at 8:30
You need to add remove stylesheet rule(s), e.g: stackoverflow.com/questions/1212500/…. 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
– A. Wolff, Commented Jun 24, 2016 at 8:35

Randy · Accepted Answer · 2016-06-24 08:21:06Z

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>

answered Jun 24, 2016 at 8:21

Randy

9,8575 gold badges43 silver badges58 bronze badges

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

3 Comments

Angel ofDemons Over a year ago

Nice. Should've thought about the hover / mouseenter/leave event instead of stupid buttons :p

Hassan Bashiri Over a year ago

the problem is i want to generate a class dynamically then remove it using removeClass

Randy Over a year ago

@HussanBashiri That is exactly what is happening here, what is unclear exactly?

Gautam Jha · Accepted Answer · 2016-06-24 08:22:54Z

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"});

answered Jun 24, 2016 at 8:22

Gautam Jha

1,4831 gold badge15 silver badges26 bronze badges

2 Comments

Hassan Bashiri Over a year ago

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

Gautam Jha Over a year ago

you can change this css again easily

Randy · Accepted Answer · 2016-06-24 08:24:19Z

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"});

edited Jun 24, 2016 at 8:24

Randy

9,8575 gold badges43 silver badges58 bronze badges

answered Jun 24, 2016 at 8:21

Samir

1,3681 gold badge10 silver badges16 bronze badges

1 Comment

Hassan Bashiri Over a year ago

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

Angel ofDemons · Accepted Answer · 2016-06-24 08:41:19Z

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

edited Jun 24, 2016 at 8:41

answered Jun 24, 2016 at 8:28

Angel ofDemons

1,2678 silver badges13 bronze badges

2 Comments

A. Wolff Over a year ago

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

Hassan Bashiri Over a year ago

exactly I'm trying to create something like an editor

Collectives™ on Stack Overflow

how can i add class to an element as string with javascript?

4 Answers 4

3 Comments

2 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related