Question

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

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

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

你会在小提琴中看到，当你第一次点击按钮时，方块会失去原来的转换，向下滑动并旋转，但随后点击按钮只会旋转方块，因为它不会丢失＆＃39;转换：转换＆＃39;属性。

我不想在我的.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是一种速记，因此必须合并这些值...没有增量方法。

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

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添加它们

3 个答案: