jQuery mudando o estilo do elemento HTML

109

Eu tenho uma lista em 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>

muda bem para mostrar horizontalmente na mudança de CSS

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

mas agora quero fazer isso com jQuery, uso:

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

mas não está funcionando, o que eu tenho de errado ao estilizar meu elemento com jQuery?

obrigado

jquery html css

— manuelBetancurt
fonte

O problema foi causado por um erro de digitação. Os argumentos nas chamadas de função JavaScript são separados por ,não :.

— Quentin

239

Usa isto:

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

Além disso, como outros afirmaram, se você quiser fazer várias alterações de css de uma vez, é quando você adiciona as chaves (para notação de objeto), e fica parecido com isto (se você quiser mudar, digamos, 'background -cor 'e' posição 'além de' exibição '):

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

6

ou: $('#navigation ul li').css({'display': 'inline-block'});- Eu sempre misturo esses dois.

— Blazemonger

1

@Blazemonger LOL, eu nem sabia que você poderia fazer isso, mas agora que você mencionou, esse 'faz' faz sentido. Obrigado por ampliar meus horizontes aqui.

— VoidKing de

Parece melhor memorizar a versão entre chaves, pois ela pode se adaptar a um ou mais atributos por vez com a mesma sintaxe;)

— cladelpino

O caso camel também funciona, então você pode usar .css ({backgroundColor: "#fff"}) - PS Eu odeio aspas duplas, mas são mais fáceis de ver neste comentário

— danday74

21

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

não um dois pontos, uma vírgula

— Jakub Michálek
fonte

14

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

Parece um erro de digitação ... erro de sintaxe :))

— Suresh Atta
fonte

5

você também pode especificar vários valores de estilo como este

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

— themhz
fonte

3

Eu acho que você pode usar este código também: e você pode gerenciar melhor seu 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>

— pedram shabani
fonte

0

mudando estilo com jquery

Tente isto

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

Você também pode alterar vários atributos em uma única consulta

Tente isto

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

— Amo Kumar
fonte