如何用 jQuery “替换” css 属性

Posted 2023-03-06

【中文标题】如何用 jQuery “替换” css 属性

【英文标题】：how to "replace" css Properties with jQuery

【发布时间】：2014-04-24 03:12:14

【问题描述】：

使用 JQuery，您将如何更改 CSS 属性（在本例中从 left 到 right） 我发现 .css("left") 可以用于检索值，然后我可以编写一个函数来设置 .css("right")，但是有没有更简单（更紧凑）的方法来做到这一点？：

#set  left: 400px; bottom: -200px; 

到

#set  right: 400px; bottom: -200px; 

谢谢

【问题讨论】：

How to define multiple CSS attributes in JQuery?的可能重复

好的，谢谢大家的反对，我可能没有正确解释我的观点......我不想将 Avempace 的解决方案与 addClass 和 removeClass 一起使用（因为我有一堆 #set ( #set1 到 #setxx）并且不想重复这些值）。 Felix 的解决方案符合我的要求。

【参考方案1】：

使用类并更改类。

您可以在问题jquery change class name中找到方法

所以你的 css 看起来像：

.set_left  left: 400px; bottom: -200px; 
.set_right right  400px; bottom: -200px; 

使用 jquery，您只需更改类。

$("#set").removeClass('set_right').addClass('set_left');

或

$("#set").removeClass('set_left').addClass('set_right');

【参考方案2】：

阅读

$('object').css('CSSKEY')

写

$('object').css('CSSKEY','NEW VALUE)

http://api.jquery.com/css/

建议的替代方法是使用 .AddClass 和 .RemoveClass - 它提供更清晰的标记

http://api.jquery.com/addclass/http://api.jquery.com/removeclass/

【参考方案3】：

JSFiddle Demo

你可以这样做：

$("#set").css("right" :  0, "left" : "auto");

Alternativley，你可以使用addClass，并在CSS中设置样式，使用jQuery，只需调用addClass("your-class")

【参考方案4】：

您可以使用.css()

var left = $('#set').css('left');
$('#set').css(
    right : left,
    left: 'auto'
);

【讨论】：

最好使用auto作为left属性的初始值。使用left: 0 可以水平扩展绝对定位的元素。