Question

我使用此代码动态创建一个类。

 $("head").append('<style type="text/css"></style>');
 var newStyleElement = $("head").children(':last');
 newStyleElement.html('.move{transform: translateX(100px);}');

我将move类分配给元素以触发动画。

$("#element").addClass("move");

稍后，我想更改移动类的translateX值。所以我得到$（“。move”）并执行此操作：

$(".move").css("transform","translateX(500px)");

这不会更改$（“。move”）翻译值，但会创建内联样式。不是我想要的，因为我想使用removeClass选项进行动画回放。

这是用于查看此问题的代码。我还写了重现问题的步骤。打开检查器，当只应进行类修改时，您将看到内联样式。

https://codepen.io/timsim/pen/KmNqEL

Answer 1

有点hacky但基本上如果你做了以下事情：

JS

$("#button").click(function(){
  $('#element').toggleClass('move');
  $('#element').removeAttr('style');
});

$("#button-2").click(function(){
  $(".move").css("transform","translateX(500px)")
});

将以下类添加到CSS中：

.move {
  transform: translateX(100px);
}

但是你真的不想在运行中更改类似的CSS类。如果你想沿着这些方向做一些事情，我建议在JS中使用以下内容。

$("head").append('<style type="text/css"></style>');
var newStyleElement = $("head").children(':last');
newStyleElement.html('.move{transform: translateX(100px);}');


$("#button").click(function(){
  $('#element').toggleClass('move');
});

$("#button-2").click(function(){
  newStyleElement.html('.move{transform: translateX(500px);}');
});

jquery创建内联样式而不是修改选定的类

1 个答案: