不要覆蓋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添加到他們

回答

相關問題