Change jQuery style of HTML element

Question

I have a list in HTML

<div id="header" class="row"> <div id="logo" class="col_12">And the winner is<span>n't...</span></div> <div id="navigation" class="row"> <ul id="pirra"> <li><a href="#">Why?</a></li> <li><a href="#">Synopsis</a></li> <li><a href="#">Stills/Photos</a></li> <li><a href="#">Videos/clips</a></li> <li><a href="#">Quotes</a></li> <li><a href="#">Quiz</a></li> </ul> </div> 

it changes perfectly to show horizontal CSS change

  div#navigation ul li { display: inline-block; } 

but now I want to do this using jQuery, I use:

  $(document).ready(function() { console.log('hello'); $('#navigation ul li').css('display': 'inline-block'); }); 

but it doesn’t work, what am I doing wrong to style my element using jQuery?

thank

Answer 1

Use this:

 $('#navigation ul li').css('display', 'inline-block'); 

In addition, as others have already said, if you want to make several CSS changes at the same time, this is when you add curly brackets (to indicate an object), and it will look something like this (if you want to change, say, 'background) -color' and 'position' in addition to 'display'):

 $('#navigation ul li').css({'display': 'inline-block', 'background-color': '#fff', 'position': 'relative'}); //The specific CSS changes after the first one, are, of course, just examples. 

Answer 2

 $('#navigation ul li').css('display', 'inline-block'); 

not a colon, comma

Answer 3

 $('#navigation ul li').css({'display' : 'inline-block'}); 

There seems to be a typo ... syntax error :))

Answer 4

You can also specify multiple style values, such as

 $('#navigation ul li').css({'display': 'inline-block','background-color': '#ff0000', 'color': '#ffffff'}); 

Answer 5

I think you can use this code as well: and you can better manage your CSS class

 <style> .navigationClass{ display: inline-block; padding: 0px 0px 0px 6px; background-color: whitesmoke; border-radius: 2px; } </style> <div id="header" class="row"> <div id="logo" class="col_12">And the winner is<span>n't...</span></div> <div id="navigation" class="row"> <ul id="pirra"> <li><a href="#">Why?</a></li> <li><a href="#">Synopsis</a></li> <li><a href="#">Stills/Photos</a></li> <li><a href="#">Videos/clips</a></li> <li><a href="#">Quotes</a></li> <li><a href="#">Quiz</a></li> </ul> </div> <script> $(document).ready(function() { $('#navigation ul li').addClass('navigationClass'); //add class navigationClass to the #navigation . }); </script> 

Answer 6

style change using jquery

Try this

 $('#selector_id').css('display','none'); 

You can also change several attributes in one request

Try this

 $('#replace-div').css({'padding-top': '5px' , 'margin' : '10px'});