无法在CSS调用jQueryLite中设置重复属性

Question

如何在对jQueryLite的单个CSS调用中设置重复属性？在角度，我想在SVG图像上做这样的事情：

element.css({'transform': "rotate("+rot*360+"deg)",'transform': "scale("+scl+")"});

设置SVG图像的旋转和比例。然而，结果是最后的转换＆＃39;属性会覆盖以前的任何属性。即，我可以设置比例或旋转但不能同时设置。

在此示例中，预期的css将如下所示：

transform: rotate(360deg); transform: scale(1)

Answer 1

您无法同时将CSS属性设置为两个完全不同的值。

如果你写了：

transform: rotate(360deg); transform: scale(1)

然后第二个值将覆盖第一个值，它最终将与

相同

transform: scale(1)

transform属性采用空格分隔的值列表。你需要写：

transform: rotate(360deg) scale(1);

并且，理论上，你在JS中完全一样：

element.css({'transform': "rotate("+rot*360+"deg) scale("+scl+")"});

Answer 2

为什么不通过以下方式合并：

element.css({'transform': "rotate("+rot*360+"deg) scale("+scl+")"});

Answer 3

这与JavaScript或jQueryLite无关 - 在样式表中，同一属性的多个声明也会相互覆盖。

指定多个转换的正确语法是

transform: rotate(360deg) scale(1)