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

Posted 2023-03-06

【中文标题】无法在对 jQueryLite 的 CSS 调用中设置重复属性

【英文标题】：Can't set duplicate attributes in CSS call to jQueryLite

【发布时间】：2016-07-31 16:35:37

【问题描述】：

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

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

这将设置 SVG 图像的旋转和缩放。但是，结果是最后一个“转换”属性覆盖了之前的任何属性。即，我可以设置比例或旋转，但不能同时设置。

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

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

【参考方案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+")");

【参考方案2】：

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

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

【参考方案3】：

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

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

transform: rotate(360deg) scale(1)

【讨论】：

啊，这么简单。我的问题太愚蠢了。感谢您的及时答复。