Question

如何将一个类作为字符串添加到我的html元素

像这样：

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

我已经尝试了 jquery addClass，但它只需要类名而不是整个类的字符串。

问题是我想动态生成一个类然后使用removeClass删除它，如果我将它添加为css则无法轻易删除它

Answer 1

这应该可以解决问题。如果您将第二个框移动，则第一个框会移动。

$('.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

这可能对您有所帮助，这不会添加任何class，它会直接将样式添加到div。 addClass() / removeClass()仅用于添加/删除class。在其中传递的参数将是class名称。

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

Answer 3

如果您已经在使用Jquery，请使用css() function了解更多here

我希望它有所帮助。

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

Answer 4

我添加了两个示例一个是将类添加到div并将样式放入其中。或我添加了一个Jquery函数，将 css应用于div 而不用添加一个类。

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>

说明：使用 addClass 事件，将一个类添加到 div 并应用 css 中的样式{{3 }}

和documentation addclass

使用 css 事件， css样式将应用于div 而不用在css中设置它你可以看到示例和文档how to remove the class

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

4 个答案: