不要覆盖css属性，而是使用jQuery添加它们

我只是想知道如何使用jquery .css（）函数不覆盖，而是为css属性添加其他值。

例如，我有一个元素，目前有css transform:translate(-50%, -50%)就可以了。 我想使用jQuery .css（）函数来ADD transform: rotate(90deg) ，但是当我使用它时，它会覆盖它。

如果我的描述令人困惑，请查看这个小提琴。 http://jsfiddle.net/justinbchristensen/mvhwbjLo/1/

您将在小提琴中看到，当您第一次单击按钮时，方块将失去其原始变换，向下滑动并旋转，但随后对按钮的所有单击都会旋转方块，因为它不会丢失’transform：translate’属性。

我不想在我的.css（）函数中说element.css('transform', 'translate(-50%,-50%) rotate(90deg)' ，我只是想能够添加旋转到现有转换。

有没有办法做到这一点？

Answer 1

由于transform是一种速记，因此必须将值组合在一起……没有增量方法。

您可以做的是检索以前的值并附加新值：

更新了JsFiddle

 var rotation = 0; function rotate() { rotation += 90; var rotationString = 'rotate(' + rotation + 'deg)'; var prev = $('#square').css('transform'); $('#square').css('transform', prev + " " + rotationString); } 

Answer 2

保存当前样式，然后连接：

 var rotation = 0; function rotate() { rotation += 90; var rotationString = 'rotate(' + rotation + 'deg)'; var current = $('#square').css('transform'); $('#square').css('transform', current +' '+ rotationString); } 

http://jsfiddle.net/oqqubda8/

它有效，我不知道是否有另一种方法可以做到这一点。

Answer 3

它覆盖值而不是添加它的原因仅仅是由于级联如何工作 。 也就是说，您在transform属性上设置了一个值，就像所有其他CSS属性一次只能有一个值一样，因此就API而言，您将用新的值覆盖其现有值。 在CSS中，它可能是这样的：

 #square { transform: translate(-50%, -50%); transform: rotate(90deg); } 

如您所见，这将导致第二个声明覆盖第一个声明。

CSS不支持部分或附加属性声明，同样无法直接向现有属性添加值而不会导致现有值丢失。

实际上，这意味着您必须在设置新值时包含现有变换。 由于您使用jQuery设置它，您可以使用.css() getter检索现有值，然后连接新转换并应用结果 ，从而节省了对现有值进行硬编码的需要：

 var currentTransform = $('#square').css('transform'); var rotationString = 'rotate(' + rotation + 'deg)'; var newTransform = currentTransform + ' ' + rotationString; $('#square').css('transform', newTransform); 

这个问题的主要问题是再次触发这个特定的代码块会导致currentTransform也包含旋转。 这将继续每次添加旋转。 如果不需要这样做，您将需要编写一些检查，或者不幸的是，对该值进行硬编码。