HTML 요소의 스타일을 변경하는 jQuery

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 -색상 '및'위치 '와'디스플레이 ') :

$('#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'});