jQuery mengubah gaya elemen HTML

110

Saya memiliki daftar di 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>

itu berubah dengan baik untuk ditampilkan secara horizontal pada perubahan CSS

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

tapi sekarang saya ingin melakukannya dengan jQuery, saya menggunakan:

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

tetapi tidak berfungsi, Apa yang salah untuk menata elemen saya dengan jQuery?

Terima kasih

jquery html css manuelBetancurt
sumber
Masalahnya disebabkan oleh kesalahan ketik. Argumen dalam pemanggilan fungsi JavaScript dipisahkan dengan ,not :.
Quentin

Jawaban:

240

Gunakan ini:

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

Juga, seperti yang dinyatakan orang lain, jika Anda ingin membuat beberapa perubahan css sekaligus, saat itulah Anda akan menambahkan kurung kurawal (untuk notasi objek), dan akan terlihat seperti ini (jika Anda ingin mengubah, katakanlah, 'background -warna 'dan' posisi 'selain' tampilan '):

$('#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
sumber
6
atau: $('#navigation ul li').css({'display': 'inline-block'});- Saya selalu mencampur keduanya.
Blazemonger
1
@Blazemonger LOL, saya bahkan tidak tahu Anda bisa melakukan itu, tetapi sekarang Anda menyebutkannya, itu 'masuk akal'. Terima kasih telah memperluas wawasan saya di sini.
VoidKing
Tampaknya lebih baik untuk menghafal versi kurung kurawal, karena dapat beradaptasi dengan satu atau lebih atribut sekaligus dengan sintaks yang sama;)
cladelpino
camel case juga berfungsi sehingga Anda dapat menggunakan .css ({backgroundColor: "#fff"}) - PS saya benci tanda kutip ganda tetapi lebih mudah dilihat di komentar ini
danday74
21 
$('#navigation ul li').css('display', 'inline-block');

bukan titik dua, koma

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

Sepertinya ada kesalahan ketik di sana ... kesalahan sintaks :))

Suresh Atta
sumber
5

Anda juga bisa menentukan beberapa nilai gaya seperti ini 

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

Saya rasa Anda juga dapat menggunakan kode ini: dan Anda dapat mengelola css kelas Anda dengan lebih baik 

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

mengubah gaya dengan jquery

Coba ini

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

Anda juga dapat mengubah beberapa atribut dalam satu kueri

Coba ini

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