how to change style of a css element using jQuery

Question

I have the following code:

  $('.signup-form-wrapper').css("style", "display: block");
                $('.login-form-wrapper').css("style", "display: none");

Not sure why it doesn't work. The element currently looks like this:

 <div class="signup-form-wrapper form-wrapper" style="display: none;">

I am trying to change this style to display: block, how do I do that?

This would work with .attr("style", "display: block;"), but most likely your intention is to use .css("display", "block") or just .show() — Explosion Pills
– Explosion Pills, Commented Apr 23, 2013 at 9:38
As an addendum I would suggest leaving as much CSS out of JQuery/javascript as possible, and instead assign a class. — Dre
– Dre, Commented Apr 23, 2013 at 9:56

Tim B James · Accepted Answer · 2013-04-23 09:49:29Z

1

You could change your code to either:

$('.signup-form-wrapper').show();

This is roughly equivalent to calling .css('display', 'block'), except that the display property is restored to whatever it was initially.

Source: http://api.jquery.com/show/

or

$('.signup-form-wrapper').css({ display: 'block' });

.css( properties )

.css( propertyName, value )

Source: http://api.jquery.com/css/#css-propertyName-value

Both will display your element and change the style.

edited Apr 23, 2013 at 9:49

answered Apr 23, 2013 at 9:37

Tim B James

20.4k4 gold badges77 silver badges108 bronze badges

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

Comments

Faisal Sayed · Accepted Answer · 2013-04-23 09:44:14Z

0

.css() itself sets the style of the element.

The function call syntax is:

$(elem).css('style-property','style-value');

change your code to:

$('.signup-form-wrapper').css("display", "block");
$('.login-form-wrapper').css("display", "none");

or for multiple styles for single element pass an object:

$(elem).css({'style-property1':'style-value1','style-property2':'style-value2'});

E.g.

$('.signup-form-wrapper').css({"display": "block", "border":"1px solid red"});

JQuery .css() docs refererence

answered Apr 23, 2013 at 9:44

Faisal Sayed

7934 silver badges12 bronze badges

Comments

chandresh_cool · Accepted Answer · 2013-04-23 09:36:11Z

0

Try this

$('.signup-form-wrapper').css("display", "block");
$('.login-form-wrapper').css("display", "none");

answered Apr 23, 2013 at 9:36

chandresh_cool

11.9k3 gold badges32 silver badges46 bronze badges

Comments

slash197 · Accepted Answer · 2013-04-23 09:37:51Z

0

If you are just looking for showing and hiding something there are shorter functions for that such as .hide() or .show()

answered Apr 23, 2013 at 9:37

slash197

9,0246 gold badges44 silver badges71 bronze badges

Collectives™ on Stack Overflow

how to change style of a css element using jQuery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related