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? — Christoph
– Christoph, Commented Mar 18, 2014 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
– Bro, Commented Mar 18, 2014 at 12:45

Community · Accepted Answer · 2017-05-23 11:49:47Z

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, 2017 at 11:49

CommunityBot

11 silver badge

answered Mar 18, 2014 at 12:27

Raul Guiu

2,41423 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Felix · Accepted Answer · 2014-03-18 12:40:55Z

4

You can use .css()

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

edited Mar 18, 2014 at 12:40

answered Mar 18, 2014 at 12:30

Felix

38.2k8 gold badges45 silver badges56 bronze badges

1 Comment

Hashem Qolami Over a year ago

Better to use auto as the initial value of left property. Using left: 0 may expand the absolutely positioned elements horizontally.

LiamB · Accepted Answer · 2014-03-18 12:32:44Z

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, 2014 at 12:32

answered Mar 18, 2014 at 12:28

LiamB

18.6k19 gold badges79 silver badges122 bronze badges

Comments

Nick R · Accepted Answer · 2014-03-18 12:30:35Z

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, 2014 at 12:30

Nick R

7,8142 gold badges24 silver badges33 bronze badges

Collectives™ on Stack Overflow

how to "replace" css Properties with jQuery

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related