jQuery cambia lo stile dell'elemento HTML

110

Ho una lista 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>

cambia bene per mostrarsi orizzontalmente al cambio di CSS

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

ma ora voglio farlo con jQuery, utilizzo:

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

ma non funziona, cosa ho sbagliato a modellare il mio elemento con jQuery?

Grazie

jquery html css

— manuelBetancurt
fonte

Il problema è stato causato da un errore di battitura. Gli argomenti nelle chiamate di funzione JavaScript sono separati da ,not :.

— Quentin

240

Usa questo:

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

Inoltre, come altri hanno affermato, se si desidera apportare più modifiche CSS contemporaneamente, è allora che si aggiungono le parentesi graffe (per la notazione degli oggetti), e sarebbe simile a questo (se si desidera modificare, ad esempio, 'background -color 'e' position 'oltre a' 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
fonte

6

oppure: $('#navigation ul li').css({'display': 'inline-block'});- Mescolo costantemente questi due.

— Blazemonger

1

@ Blazemonger LOL, non sapevo nemmeno che potessi farlo, ma ora che lo dici, ha senso. Grazie per aver ampliato i miei orizzonti qui.

— VoidKing

Sembra meglio quindi memorizzare la versione con

— parentesi graffe

anche la custodia cammello funziona così puoi usare .css ({backgroundColor: "#fff"}) - PS io odio le virgolette doppie ma sono più facili da vedere in questo commento

— danday74

21

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

non due punti, una virgola

— Jakub Michálek
fonte

14

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

Sembra un errore di battitura lì ... errore di sintassi :))

— Suresh Atta
fonte

5

puoi anche specificare più valori di stile come questo

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

— themhz
fonte

3

Penso che tu possa usare anche questo codice: e puoi gestire meglio la tua classe 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
fonte

0

cambiare stile con jquery

Prova questo

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

È inoltre possibile modificare più attributi in una singola query

Prova questo

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

— Amo Kumar
fonte