HTML तत्व की jQuery की बदलती शैली

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>

यह सीएसएस परिवर्तन पर क्षैतिज रूप से दिखाने के लिए ठीक बदलता है

    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

— manuelBetancurt
स्रोत

समस्या टाइपो के कारण हुई थी। जावास्क्रिप्ट फ़ंक्शन कॉल में तर्क को अलग ,नहीं किया गया है :।

— क्वेंटिन

240

इसे इस्तेमाल करो:

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

साथ ही, जैसा कि दूसरों ने कहा है, यदि आप एक ही बार में कई सीएसएस परिवर्तन करना चाहते हैं, तो यह है कि जब आप घुंघराले ब्रेसिज़ (ऑब्जेक्ट नोटेशन के लिए) जोड़ेंगे, और यह कुछ इस तरह दिखाई देगा (यदि आप बदलना चाहते हैं, तो कहें, 'पृष्ठभूमि 'प्रदर्शन' के अलावा -color और 'स्थिति':

$('#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'});- मैं लगातार उन दोनों को मिलाता हूं।

— ब्लेज़मॉन्गर

1

@Blazemonger LOL, मुझे भी नहीं पता था कि आप ऐसा कर सकते हैं, लेकिन अब जब आप इसका उल्लेख करते हैं, तो यह समझ में आता है। यहाँ मेरे क्षितिज को व्यापक बनाने के लिए धन्यवाद।

— VoidKing

बेहतर लगता है कि घुंघराले लट संस्करण को याद रखना बेहतर है, क्योंकि यह एक ही समय में एक ही वाक्य रचना के साथ एक या एक से अधिक विशेषताओं के लिए अनुकूल हो सकता है;)

— cladelpino

ऊंट का मामला भी काम करता है इसलिए आप उपयोग कर सकते हैं .cs ({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'});

— themhz
स्रोत

3

मुझे लगता है कि आप इस कोड का भी उपयोग कर सकते हैं: और आप अपनी कक्षा के सीएसएस का बेहतर प्रबंधन कर सकते हैं

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

— प्रेम कुमार
स्रोत