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

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