如何使用jQuery为同一元素中的相同CSS属性添加不同的值？

Question

我想用相同的选择器，每次使用jQuery，不同的值多次添加相同的CSS属性。

$('.element').css({ 
    'cursor':'-moz-grab', 
    'cursor':'-webkit-grab', 
    'cursor':'move' 
}); 

我该怎么做，而不是每次都覆盖相同的css属性？

Answer 1

根据您的问题

DEMO

$('.element').attr("style", "cursor:moz-grab; cursor:-webkit-grab; cursor:move;"); 

Or 

$('.element').css({"cursor":"moz-grab","cursor":"-webkit-grab" ,"cursor":"move" }) 

Or 

.addclass{ 
    cursor:-moz-grab; 
    cursor:-webkit-grab; 
    cursor:move; 
} 

，然后添加使用addClass

Answer 2

您可以修改样式属性的类。

$('.element').attr("style", "cursor:-moz-grab;cursor:-webkit-grab;cursor:move"); 

Answer 3

$('.element').each(function() { 

    var eleStyle = ""; 
    if($(this).attr('style')) eleStyle = $(this).attr('style'); 

    $(this).attr(
     'style', eleStyle + 'cursor:-moz-grab; cursor:-webkit-grab; cursor:move;' 
    ); 

}); 

Answer 4

添加到您的CSS一类具有所需的规则。

.addclass{ 
    cursor:-moz-grab; 
    cursor:-webkit-grab; 
    cursor:move; 
} 

，然后这个类添加到您的元素

$('.element').addClass('addclass'); 

Answer 5

这为我工作，我不得不根据用户输入动态添加CSS。

在你的情况下，这是没有必要的，因为你有一个非常明确的CSS，它只是添加游标，所以添加一个类将是一个更好的选择。

在需要添加的情况下，像我一样动态改变用户选择的颜色，可以使用下面的代码。您必须为每个元素执行此操作，因此您可以逐个提取每个元素样式，否则$ elm.attr（“style”）将返回第一个元素样式或未定义，不确定，除非您只有一个元素带类“元素”

$('.element').each(function(idx, elm) { 

    var $elm = $(elm); 
    // This will add standard CSS 
    $elm.css({ 'cursor':'move'}); 

    // This will add fallbacks 

    $elm.attr("style", $elm.attr("style") + ";cursor:-moz-grab;cursor:-webkit-grab"); 

});