jQuery change le style d'un élément HTML

Question

J'ai une liste sur 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>  

il change bien pour s'afficher horizontalement sur le changement de CSS

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

mais maintenant je veux le faire avec jQuery, j'utilise :

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

mais cela ne fonctionne pas, qu'est-ce que j'ai de mal à styliser mon élément avec jQuery ?

merci

Answer 1

Utilisez ça :

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

De plus, comme d'autres l'ont indiqué, si vous souhaitez effectuer plusieurs modifications css à la fois, vous devez ajouter les accolades (pour la notation des objets) et cela ressemblerait à ceci (si vous souhaitez modifier, par exemple, la couleur d'arrière-plan et la position en plus de l'affichage) :

$('#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');

pas un deux-points, une virgule

Answer 3

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

Il semble qu'il y ait une faute de frappe ...une erreur de syntaxe :)))

Answer 4

Vous pouvez également spécifier plusieurs valeurs de style comme ceci

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

Answer 5

Je pense que vous pouvez aussi utiliser ce code : et vous pouvez mieux gérer vos css de classe

<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>