不要覆盖CSS属性，但用jQuery添加到他们

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

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

如果我的描述很混乱，请看看这个小提琴。 http://jsfiddle.net/justinbchristensen/mvhwbjLo/1/

您将在小提琴看到，当你第一次点击该按钮，广场失去了其原有的转变，向下滑动，和旋转，但在按钮上的所有后续的点击次数仅旋转，因为它没有失去广场“改造：翻译'财产。

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

有没有办法做到这一点？

来源

2015-02-06 justinbc820

由于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); 
}

来源

2015-02-06 19:27:11 LcSalazar

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

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/

它的工作原理，我不知道是否有另一种方式来做到这一点。

来源

2015-02-06 19:27:05 vcanales

，它覆盖的价值，而不是向它的原因简单地归结于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包含旋转以及。这将继续每次添加旋转。如果这不是你想要的，你可能需要写一些检查，否则不幸的是，硬编码值。

来源

2015-02-06 19:28:32 BoltClock

不要覆盖CSS属性，但用jQuery添加到他们

回答

相关问题