如何使用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 在此處了解更多

我希望這會有所幫助。

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

Answer 4

我添加了兩個示例。
將一個類添加到div並在其中放置樣式。 或者我添加了一個Jquery函數，該函數將 CSS 應用於 div 而不添加類。

jsfiddle在這里

 $('#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 文檔addclass中的樣式

以及如何刪除課程

通過css事件， 無需在css中進行設置即可將css樣式應用於div，您可以在此處查看示例和文檔