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

Question

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

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

如果我的描述令人困惑，请查看此 fiddle。 http://jsfiddle.net/justinbchristensen/mvhwbjLo/1/

你会在 Fiddle 中看到，当你第一次点击按钮时，正方形失去了它原来的变换，向下滑动并旋转，但所有后续点击按钮只是旋转正方形，因为它不是失去 'transform:translate' 属性.

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

有什么办法吗？

Answer 1

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

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 2

由于 transform 有点像 shorthand，因此必须组合这些值...没有递增方法。

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

Updated JsFiddle

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

Answer 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 也包含旋转。这将继续每次添加旋转。如果这不是你想要的，你要么需要写一些检查，要么失败，不幸的是，硬编码这个值。

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

Don't overwrite css properties, but add to them with jQuery

css

jquery

css-transforms