jQuery cambiando el estilo del elemento HTML

110

Tengo una lista en 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>

cambia bien para mostrarse horizontalmente en el cambio de CSS

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

pero ahora quiero hacerlo con jQuery, uso:

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

pero no funciona, ¿qué tengo mal para diseñar mi elemento con jQuery?

Gracias

jquery html css manuelBetancurt
fuente
El problema fue causado por un error tipográfico. Los argumentos en las llamadas a funciones de JavaScript se separan con ,not :.
Quentin

Respuestas:

240

Utilizar este:

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

Además, como han dicho otros, si desea realizar varios cambios CSS a la vez, es cuando debe agregar las llaves (para la notación de objetos), y se vería así (si quisiera cambiar, digamos, 'background -color 'y' position 'además de' 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.
VoidKing
fuente
6
o: $('#navigation ul li').css({'display': 'inline-block'});- constantemente mezclo esos dos.
Blazemonger
1
@Blazemonger LOL, ni siquiera sabía que podías hacer eso, pero ahora que lo mencionas, eso 'sí' tiene sentido. Gracias por ampliar mis horizontes aquí.
VoidKing
Entonces parece mejor memorizar la versión con llaves, ya que puede adaptarse a uno o más atributos a la vez con la misma sintaxis;)
cladelpino
camel case también funciona, así que puedes usar .css ({backgroundColor: "#fff"}) - PD: odio las comillas dobles pero son más fáciles de ver en este comentario
danday74
21 
$('#navigation ul li').css('display', 'inline-block');

no dos puntos, una coma

Jakub Michálek
fuente
14 
$('#navigation ul li').css({'display' : 'inline-block'});

Parece un error tipográfico allí ... error de sintaxis :))

Suresh Atta
fuente
5

también puede especificar varios valores de estilo como este 

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

Creo que también puede usar este código: y puede administrar mejor su clase css 

<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>
pedram shabani
fuente
0

cambiando de estilo con jquery

Prueba esto

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

También puede cambiar varios atributos en una sola consulta

Prueba esto

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