jQuery CSS change on IF statement

Question

I'm working on a project in jQuery and I'm selecting multiple CSS to change on a condition:

if (jQuery('#1').is(":visible")) {
      jQuery('#2').css({"border-top":"0px", "border-bottom":"7px solid #0767B1"});    
      jQuery('#3').css({"display:table-cell"}); 
}

It works with only the #2 css change, but when I add #3 it isn't working anymore.

1,2 and 3 are not valid id's. They must not start with a digit. — Fabrizio Calderan
– Fabrizio Calderan, Commented Jun 26, 2013 at 9:44
Check your ". "display:table-cell" should be "display":"table-cell" — maqjav
– maqjav, Commented Jun 26, 2013 at 9:44
Just a side note: IDs and classes cannot start with numbers. Just like variables in JavaScript. — Ahmad Alfy
– Ahmad Alfy, Commented Jun 26, 2013 at 10:56
@Fabrizio Calderan & Ahmad Alfy, I know. It was just for this example, changed the names to those numbers. — Pim Peters
– Pim Peters, Commented Jun 26, 2013 at 11:54

Community · Accepted Answer · 2017-05-23 11:50:02Z

3

Put the : out of the quotes:

jQuery('#3').css({                        //this is used for multiple values
    "display":"table-cell"
});

Or like:

jQuery('#3').css("display","table-cell"); //for single values

More at Jquery .css() syntax

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Jun 26, 2013 at 9:44

Vucko

20.9k12 gold badges60 silver badges108 bronze badges

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

Comments

Frank W · Accepted Answer · 2013-06-26 10:53:45Z

3

Try it like this:

if (jQuery('#1').is(":visible")) {
      jQuery('#2').css({"border-top":"0px", "border-bottom":"7px solid #0767B1"});    
      jQuery('#3').css("display", "table-cell"); 
}

The jQuery .css() method can be used in two ways. You can manipulate a single attribute, which looks like .css("attribute", "value");, or you can manipulate multiple values, but that has a different writing: .css({"attribute" : "value", "attribute2" : "value"});. But you can use the second method (as you tried) also for just a single attribute, I didn't notice your small mistake but as Vucko mentioned you just forgot to surround the : with ", so this solution was what you were looking for (but it's usually for multiple arguments as you use the { } brackets):

jQuery('#3').css({"display":"table-cell"});

And my recommendation was to use the single attribute notation:

jQuery('#3').css("display", "table-cell");

edited Jun 26, 2013 at 10:53

answered Jun 26, 2013 at 9:44

Frank W

9011 gold badge8 silver badges20 bronze badges

4 Comments

Christoph Over a year ago

Explaining is always better than just throwing a block of code at the reader and playing the "find the character I changed" game.

Neeraj Over a year ago

@Francodi Can you explain what is difference between your answer and "Pim Peters" Question.

Christoph Over a year ago

Please add an explanation, then I happily convert my -1 into a +1.

Frank W Over a year ago

You're right, I just thought he would see the changed line difference and yeah... that was not really helpful. Will do it better the next time I response to someone, thanks for telling.

Tejas Savaliya · Accepted Answer · 2013-06-26 10:31:37Z

0

You can use below code for css change using jquery

// For single values :
if($('#example').css('background-color','yellow')) {
    $('#1').css("display","none");
}

// For Multiple values :
if($('#example').css('background-color','yellow')) {    // Condition code
    $('#1').css("display","none");
    $('#2').css({
      'background-color' : 'yellow',
      'font-weight' : 'bolder'
    });
}

answered Jun 26, 2013 at 10:31

Tejas Savaliya

6389 silver badges9 bronze badges

Collectives™ on Stack Overflow

jQuery CSS change on IF statement

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related