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

jHTML 요소의 스타일을 변경하는 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를 변경하고 싶다면, 그것은 (객체 표기를 위해) 곱슬곱슬한 가새를 추가하는 것이고, 그것은 이렇게 보일 것입니다 (만약 당신이 '표시' 외에 '배경색'과 '위치'를 변경하고 싶다면):

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

두번째 요소를 a 안에 넣습니다.<div>특정 ID를 사용하고 스타일을 변경합니다.

var post_id = 7;
var heart = $('#' + post_id).children().eq(1);
heart.css('color','red');

참고: 이는 분명해 보이지만 저를 괴롭히고 당신에게도 일어날 수 있습니다.수정하려는 스타일이 해당 디바 내부 스타일이 아닌 디바 자체 스타일인지 확인합니다.예를 들어 다음과 같은 것이 있습니다.

<div class="loves_it"><i class="fas fa-heart" style="color:gray"></i></div>

그리고 분명히css()Jquery의 방법은 작동하지 않습니다.따라서 다음과 같이 해야 합니다.

<div class="loves_it" style="color:gray"><i class="fas fa-heart"></i></div>

언급URL : https://stackoverflow.com/questions/16086201/jquery-changing-style-of-html-element