如何添加類作爲與JavaScript字符串的元素？

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(){ 
 
\t $("#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(){ 
 
\t \t $("#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樣式documentation addclass

和how to remove the class

隨着CSS事件CSS樣式將被應用到div 沒有在CSS設置它，你可以看到一個例子和文檔here