jQuery изменяет стиль HTML-элемента

110

У меня есть список на 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?

Спасибо

jquery html css

— мануэль
источник

Проблема была вызвана опечаткой. Аргументы в вызовах функций JavaScript разделяются знаком ,not :.

— Quentin

241

Использовать это:

$('#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.

— VoidKing
источник

6

или: $('#navigation ul li').css({'display': 'inline-block'});- Я постоянно смешиваю эти два.

— Blazemonger

1

@Blazemonger LOL, я даже не знал, что вы можете это сделать, но теперь, когда вы упомянули об этом, это «имеет смысл». Спасибо, что расширили мой кругозор.

— VoidKing

Тогда кажется лучше запомнить версию в фигурных скобках, поскольку она может адаптироваться к одному или нескольким атрибутам одновременно с одним и тем же синтаксисом;)

— cladelpino

Случай верблюда также работает, поэтому вы можете использовать .css ({backgroundColor: "#fff"}) - PS Я ненавижу двойные кавычки, но их легче увидеть в этом комментарии

— danday74

21

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

не двоеточие, а запятая

— Якуб Михалек
источник

14

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

Вроде опечатка там ... синтаксическая ошибка :))

— Суреш Атта
источник

5

вы также можете указать несколько значений стиля, подобных этому

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

— их
источник

3

Я думаю, вы также можете использовать этот код: и вы можете лучше управлять своим классом 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>

— Педрам Шабани
источник

0

изменение стиля с помощью jquery

Попробуй это

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

Вы также можете изменить несколько атрибутов в одном запросе

Попробуй это

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

— Любовь Кумара
источник