এইচটিএমএল উপাদানের jQuery পরিবর্তন শৈলী

Question

আমার এইচটিএমএল একটি তালিকা আছে

<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 দিয়ে আমার উপাদানটি স্টাইল করতে আমার কী ভুল আছে?

ধন্যবাদ

Comments

টাইপোর কারণে সমস্যা হয়েছিল। জাভাস্ক্রিপ্ট ফাংশন কল আর্গুমেন্ট সহ পৃথক করা হয় ,না :।

— কোয়ান্টিন

Answer 1

এটা ব্যবহার কর:

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

এছাড়াও, অন্যরা যেমন বলেছে, আপনি যদি একবারে একাধিক সিএস পরিবর্তন করতে চান, তবে আপনি যখন কোঁকড়া ধনুর্বন্ধনী (বস্তুর স্বরলিখনের জন্য) যুক্ত করবেন, এবং এটি এর মতো কিছু হবে (যদি আপনি পরিবর্তন করতে চান, বলুন, 'ব্যাকগ্রাউন্ড) -রঙার 'এবং' অবস্থান '' প্রদর্শন 'ছাড়াও):

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

Comments

বা: $('#navigation ul li').css({'display': 'inline-block'});- আমি ক্রমাগত এই দুটি আপ মিশ্রিত।

— ব্লেজমোনজার

@ ব্লাজমোনজার এলএল, আমি জানতাম না যে আপনি এটি করতে পারেন, তবে এখন আপনি এটি উল্লেখ করেছেন, তা 'বোঝায়'। আমার দিগন্ত বিস্তৃত করার জন্য ধন্যবাদ।

— ভয়েডকিং

তখন কোঁকড়ানো ব্রেসিড সংস্করণটি মুখস্থ রাখতে আরও ভাল মনে হয়, যেহেতু এটি একই সিনট্যাক্সের সাহায্যে এক সাথে এক বা একাধিক বৈশিষ্ট্যের সাথে খাপ

— খাইয়ে

উটের ক্ষেত্রেও কাজ করে যাতে আপনি .css ব্যবহার করতে পারেন ({ব্যাকগ্রাউন্ড কালার: "# ফাফ"}) - পিএস আমি ডাবল

— কোটকে

Answer 2

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

কোলন নয়, কমা

Answer 3

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

এটি সেখানে টাইপো মনে হচ্ছে ... সিনট্যাক্স ভুল :))

Answer 4

আপনি এই জাতীয় একাধিক শৈলী মান নির্দিষ্ট করতে পারে

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

Answer 5

আমি মনে করি আপনি এই কোডটিও ব্যবহার করতে পারেন: এবং আপনি আপনার ক্লাস সিএসএস আরও ভাল পরিচালনা করতে পারেন

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

Answer 6

jquery সঙ্গে শৈলী পরিবর্তন

এটা চেষ্টা কর

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

আপনি একক ক্যোয়ারিতে একাধিক বৈশিষ্ট্যও পরিবর্তন করতে পারেন

এটা চেষ্টা কর

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