jQuery thay đổi phong cách của phần tử HTML

Question

tôi có một danh sách về 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 CSS thay đổi

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 làm gì sai khi tạo kiểu cho phần tử của mình với jQuery?

nhờ

Answer 1

không sử dụng này:

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

Thay vì sử dụng 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à khi bạn sẽ thêm các 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, 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. 

Answer 2

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

không một dấu hai chấm, dấu phẩy

Answer 3

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

Có vẻ như một lỗi đánh máy có ... sai lầm cú pháp :))

Answer 4

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

này

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

Answer 5

tôi nghĩ bạn cũng có thể sử dụng mã số này: và bạn có thể quản lý lớp css của bạn 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>