jQuery thay đổi kiểu của phần tử HTML

Tôi có một danh sách trên 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>  

nó thay đổi tốt để hiển thị theo chiều ngang trên thay đổi CSS

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

nhưng bây giờ tôi muốn làm điều đó với jQuery, tôi sử dụng:

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

nhưng không hoạt động, Tôi mắc lỗi gì khi định kiểu phần tử của mình bằng jQuery?

cảm ơn

Dùng cái này:

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

Ngoài ra, như những người khác đã nói, nếu bạn muốn thực hiện nhiều thay đổi css cùng một lúc, đó là lúc bạn thêm dấu ngoặc nhọn (đối với ký hiệu đối tượng) và nó sẽ trông giống như thế này (nếu bạn muốn thay đổi, hãy nói, 'background -color 'và' position 'ngoài' 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');

không phải dấu hai chấm, dấu phẩy

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

Có vẻ như một lỗi chính tả ở đó ... lỗi cú pháp :))

bạn cũng có thể chỉ định nhiều giá trị kiểu như thế này

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

Tôi nghĩ bạn cũng có thể sử dụng mã này: và bạn có thể quản lý css lớp của mình tốt hơn

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

thay đổi phong cách với jquery

Thử cái này

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

Bạn cũng có thể thay đổi nhiều thuộc tính trong một truy vấn

Thử cái này

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