how to "replace" css Properties with jQuery

Question

with JQuery how would you change a CSS property like (in this example from left to right) I found that .css("left") could be used to retrieve the value, then I could write a function to set the .css("right"), but is there an easier (more compact) way to do it ?:

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

to

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

Thanks

possible duplicate of [How to define multiple CSS attributes in JQuery?](http://stackoverflow.com/questions/447197/how-to-define-multiple-css-attributes-in-jquery) — Christoph, Mar 18 '14 at 12:31
ok guys thanks for the downvotes, I maybe didn't explained my point correctly... I didn't want to use Avempace's solution with addClass and removeClass (because I have a bunch of #set (#set1 to #setxx) and didn't want to duplicate the values). Felix's solution corresponds to what I was looking for. — Bro, Mar 18 '14 at 12:45

score 5 · Answer 1 · edited May 23 '17 at 11:49

5

Use classes and change the class.

You can find how in the question jquery change class name

so your css will look like:

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

With jquery you just change the class.

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

or

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

edited May 23 '17 at 11:49

Community

1
1

answered Mar 18 '14 at 12:27

Raul Guiu

2,374
22
37

Felix · Accepted Answer · 2014-03-18T12:40:55.270

4

You can use .css()

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

edited Mar 18 '14 at 12:40

answered Mar 18 '14 at 12:30

Felix

37,892
8
43
55

2

Better to use `auto` as the initial value of `left` property. Using `left: 0` may expand the absolutely positioned elements horizontally. – Hashem Qolami Mar 18 '14 at 12:39

LiamB · Answer 3 · 2014-03-18T12:32:44.877

1

To Read

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

To Write

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

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

Your alternate method as suggested, is to use .AddClass and .RemoveClass - It provides a cleaner markup

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

edited Mar 18 '14 at 12:32

answered Mar 18 '14 at 12:28

LiamB

18,243
19
75
116

score 0 · Answer 4 · answered Mar 18 '14 at 12:30

0

JSFiddle Demo

You could do something like this:

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

Alternativley, you could use addClass, and set the styles in the CSS, and using jQuery, just call addClass("your-class")

answered Mar 18 '14 at 12:30

Nick R

7,704
2
22
32

how to "replace" css Properties with jQuery

4 Answers4

Linked

Related