jQuery ändert den Stil des HTML-Elements

109

Ich habe eine Liste auf 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>

Es ändert sich gut, um bei CSS-Änderungen horizontal angezeigt zu werden

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

aber jetzt möchte ich es mit jQuery machen, ich benutze:

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

funktioniert aber nicht. Was habe ich falsch gemacht, um mein Element mit jQuery zu stylen?

Vielen Dank

jquery html css manuelBetancurt
quelle
Das Problem wurde durch einen Tippfehler verursacht. Argumente in JavaScript-Funktionsaufrufen werden durch ,nicht getrennt :.
Quentin

Antworten:

239

Benutze das:

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

Wie andere bereits gesagt haben, würden Sie, wenn Sie mehrere CSS-Änderungen gleichzeitig vornehmen möchten, die geschweiften Klammern (für die Objektnotation) hinzufügen, und es würde ungefähr so ​​aussehen (wenn Sie beispielsweise den Hintergrund ändern möchten -Farbe 'und' Position 'zusätzlich zu' Anzeige '):

$('#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
quelle
6
oder: $('#navigation ul li').css({'display': 'inline-block'});- Ich vermische diese beiden ständig.
Blazemonger
1
@Blazemonger LOL, ich wusste nicht einmal, dass du das kannst, aber jetzt, wo du es sagst, macht das Sinn. Vielen Dank, dass Sie meinen Horizont hier erweitert haben.
VoidKing
Es scheint besser, sich die geschweifte Version zu merken, da sie sich mit derselben Syntax an ein oder mehrere Attribute gleichzeitig anpassen kann;)
cladelpino
Kamel Fall funktioniert auch, so dass Sie .css ({backgroundColor: "#fff"}) verwenden können - PS Ich hasse doppelte Anführungszeichen, aber sie sind in diesem Kommentar leichter zu sehen
danday74
21 
$('#navigation ul li').css('display', 'inline-block');

kein Doppelpunkt, kein Komma

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

Es scheint ein Tippfehler zu sein ... Syntaxfehler :))

Suresh Atta
quelle
5

Sie können auch mehrere Stilwerte wie diesen angeben 

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

Ich denke, Sie können diesen Code auch verwenden: und Sie können Ihre Klasse CSS besser verwalten 

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

Stil ändern mit jquery

Versuche dies

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

Sie können auch mehrere Attribute in einer einzigen Abfrage ändern

Versuche dies

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