web-dev-qa-db-ja.com

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でスタイルするために何が悪いのですか？

ありがとう

jqueryhtmlcss
91
manuelBetancurt

これを使って：

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

また、他の人が言っているように、一度に複数のcssを変更したいのであれば、（オブジェクト表記のために）中括弧を追加し、それを次のようにします。 'display'に加えて-color 'および' position '）：

$('#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.
199
VoidKing
$('#navigation ul li').css('display', 'inline-block');

コロンではなく、コンマ

19
Jakub Michálek
$('#navigation ul li').css({'display' : 'inline-block'});

それはそこにタイプミスがあるようです...構文ミス:)）

12
Suresh Atta

このように複数のスタイル値を指定することもできます

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

私はあなたもこのコードを使うことができると思います：そしてあなたはより良いあなたのクラス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>
2
pedram shabani