jQuery เปลี่ยนรูปแบบขององค์ประกอบ HTML

ฉันมีรายการเกี่ยวกับ 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>  

มันเปลี่ยนแปลงได้ดีในการแสดงแนวนอนในการเปลี่ยนแปลง CSS

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

แต่ตอนนี้ฉันต้องการทำกับ jQuery ฉันใช้:

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

แต่ใช้งานไม่ได้ฉันมีอะไรผิดพลาดในการจัดรูปแบบองค์ประกอบด้วย jQuery

ขอบคุณ

ใช้สิ่งนี้:

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

นอกจากนี้ตามที่คนอื่น ๆ ระบุไว้หากคุณต้องการทำการเปลี่ยนแปลง css หลายรายการพร้อมกันนั่นคือเมื่อคุณเพิ่มวงเล็บปีกกา (สำหรับสัญกรณ์วัตถุ) และจะมีลักษณะดังนี้ (ถ้าคุณต้องการเปลี่ยนให้พูดว่า 'background -color 'และ' position 'นอกเหนือจาก' 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.

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

ไม่ใช่เครื่องหมายจุดคู่ลูกน้ำ

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

ดูเหมือนว่าจะพิมพ์ผิดที่นั่น ... ความผิดพลาดทางไวยากรณ์ :))

คุณยังสามารถระบุค่าสไตล์ได้หลายแบบเช่นนี้

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

ฉันคิดว่าคุณสามารถใช้รหัสนี้ได้เช่นกัน: และคุณสามารถจัดการคลาส 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>

เปลี่ยนสไตล์ด้วย jquery

ลองสิ่งนี้

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

คุณยังสามารถเปลี่ยนแอตทริบิวต์หลายรายการในแบบสอบถามเดียวได้

ลองสิ่งนี้

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