jQuery HTML öğesinin stilini değiştiriyor

110

HTML üzerine bir listem var

<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 değişikliğinde yatay olarak gösterilecek şekilde iyi değişir

    div#navigation ul li { 
        display: inline-block;
    }

ama şimdi jQuery ile yapmak istiyorum, kullanıyorum:

    $(document).ready(function() {
  console.log('hello');
   $('#navigation ul li').css('display': 'inline-block');
});

ama çalışmıyor. Öğemi jQuery ile biçimlendirmekle ne yanlışım?

Teşekkürler

jquery html css

— manuelBetancurt
kaynak

Soruna bir yazım hatası neden oldu. JavaScript işlev çağrılarındaki bağımsız değişkenler ,not ile ayrılır :.

— Quentin

240

Bunu kullan:

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

Ayrıca, başkalarının da belirttiği gibi, aynı anda birden fazla css değişikliği yapmak istiyorsanız, o zaman küme parantezlerini eklersiniz (nesne gösterimi için) ve şuna benzer bir şeye benzeyecektir (değiştirmek isterseniz, -renk 've' konum 'ile' ekran '):

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

6

veya: $('#navigation ul li').css({'display': 'inline-block'});- Bu ikisini sürekli karıştırıyorum.

— Blazemonger

1

@Blazemonger LOL, bunu yapabileceğini bile bilmiyordum, ama şimdi bahsettiğinize göre, bu 'mantıklı'. Burada ufkumu genişlettiğin için teşekkürler.

— VoidKing

Aynı sözdizimi ile aynı anda bir veya daha fazla özniteliğe uyum sağlayabildiğinden, kıvrımlı parantezli sürümü ezberlemek daha iyi görünüyor;)

— cladelpino

camel case, .css ({backgroundColor: "#fff"}) kullanabilmeniz için de işe yarıyor - PS, çift tırnaktan nefret ediyorum, ancak bu yorumda görülmesi daha kolay

— danday74

21

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

iki nokta üst üste değil, virgül

— Jakub Michálek
kaynak

14

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

Orada bir yazım hatası görünüyor ... sözdizimi hatası :))

— Suresh Atta
kaynak

5

bunun gibi birden çok stil değeri de belirtebilirsiniz

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

— themhz
kaynak

3

Bu kodu da kullanabileceğinizi düşünüyorum: ve sınıf css'ınızı daha iyi yönetebilirsiniz

<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>

— pedram shabani
kaynak

0

jquery ile stil değiştirmek

Bunu dene

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

Tek bir sorguda birden çok özelliği de değiştirebilirsiniz

Bunu dene

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

— Love Kumar
kaynak