jQuery zmienia styl elementu HTML

110

Mam listę w 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>

zmienia się dobrze, aby wyświetlać poziomo po zmianie CSS

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

ale teraz chcę to zrobić z jQuery, używam:

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

ale nie działa, co mam złego w stylizowaniu mojego elementu za pomocą jQuery?

dzięki

jquery html css manuelBetancurt
źródło

Problem został spowodowany literówką. Argumenty w wywołaniach funkcji JavaScript są oddzielane znakiem ,nie :.

Quentin,

240

Użyj tego:

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

Ponadto, jak powiedzieli inni, jeśli chcesz wprowadzić wiele zmian w CSS naraz, wtedy dodasz nawiasy klamrowe (dla notacji obiektowej) i będzie to wyglądać mniej więcej tak (jeśli chcesz zmienić, powiedzmy, 'tło -kolor 'i' pozycja 'oprócz' 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
źródło

6

lub: $('#navigation ul li').css({'display': 'inline-block'});- Ciągle mieszam te dwie rzeczy.

Blazemonger

1

@Blazemonger LOL, nawet nie wiedziałem, że możesz to zrobić, ale teraz, gdy o tym wspomniałeś, to „ma” ma sens. Dziękuję za poszerzenie moich horyzontów tutaj.

VoidKing

Wydaje się wtedy lepiej zapamiętać wersję z kręconymi usztywnieniami, ponieważ może ona dostosowywać się do jednego lub więcej atrybutów naraz z tą samą składnią;)

cladelpino

wielbłąd też działa, więc możesz użyć .css ({backgroundColor: "#fff"}) - PS Nie znoszę podwójnych cudzysłowów, ale są one łatwiejsze do zobaczenia w tym komentarzu

danday74

21

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

nie dwukropek, przecinek

Jakub Michálek
źródło

14

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

Wygląda na literówkę ... błąd składniowy :))

Suresh Atta
źródło

5

możesz również określić wiele wartości stylu w ten sposób

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

themhz
źródło

3

Myślę, że możesz również użyć tego kodu: i możesz lepiej zarządzać swoim CSS klasy

<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
źródło

0

zmiana stylu za pomocą jquery

Spróbuj tego

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

Możesz także zmienić wiele atrybutów w jednym zapytaniu

Spróbuj tego

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

Uwielbiam Kumara
źródło

jQuery zmienia styl elementu HTML

Odpowiedzi: