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

【问题标题】：Don't overwrite css properties, but add to them with jQuery不要覆盖 css 属性，而是使用 jQuery 添加到它们
【发布时间】：2015-02-07 03:40:38
【问题描述】：

我只是想知道如何使用 jquery .css() 函数不覆盖，而是向 css 属性添加附加值。

例如，我有一个元素，它当前具有 css transform:translate(-50%, -50%)。并且我想使用jQuery .css() 函数来添加transform: rotate(90deg)，但是当我使用它时，它会覆盖它。

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

您将在 Fiddle 中看到，当您第一次单击按钮时，正方形会丢失其原始变换，向下滑动并旋转，但所有后续单击按钮只会旋转正方形，因为它不会丢失 'transform:translate ' 属性。

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

有什么办法吗？

【问题讨论】：

标签： jquery css css-transforms

【解决方案1】：

由于transform 是一种简写形式，因此必须将值组合在一起...没有递增方法。

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

Updated JsFiddle

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

【讨论】：

【解决方案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/

有效，不知道有没有其他办法。

【讨论】：

【解决方案3】：

它覆盖值而不是添加到它的原因仅仅是由于how the cascade works。也就是说，您在 transform 属性上设置了一个值，与所有其他 CSS 属性一样，一次只能有一个值，因此就 API 而言，您正在用一个新值覆盖其现有值。在 CSS 中，它可能是这样的：

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

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

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

本质上，这意味着您必须在设置现有转换时将其包含在新值中。由于您使用 jQuery 进行设置，因此您可以 retrieve the existing value using the .css() getter, then concatenate your new transform and apply the result，从而无需对现有值进行硬编码：

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

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

【讨论】：