CODEWITHSUNDEEP
jqueryhtmlcss
manuelBetancurt
manuelBetancurt

Reputation: 16168

jQuery changing style of HTML element

I have a list on 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>

it changes fine to show horizontally on CSS change

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

but now I want to do it with jQuery, I use:

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

but is not working, What do i have wrong to style my element with jQuery?

thanks

Upvotes: 132

Views: 448169

Answers (7)

Gass
Gass

Reputation: 9412

Get the second element inside a <div> with an specific id and change the style:

var post_id = 7;
var heart = $('#' + post_id).children().eq(1);
heart.css('color','red');

Note: This may seem obvious but it troubled me and may also happen to you. Make sure the style you want to modify is of the div itself and not a style inside that div. So for example you may have something like:

<div class="loves_it"><i class="fas fa-heart" style="color:gray"></i></div>

And abviously css() method of Jquery won't work. So make sure it's as follows:

<div class="loves_it" style="color:gray"><i class="fas fa-heart"></i></div>

Upvotes: 2

Love Kumar
Love Kumar

Reputation: 1124

changing style with jquery

Try This

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

You can also change multiple attribute in a single query

Try This

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

Upvotes: 1

VoidKing
VoidKing

Reputation: 6432

Use this:

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

Also, as others have stated, if you want to make multiple css changes at once, that's when you would add the curly braces (for object notation), and it would look something like this (if you wanted to change, say, 'background-color' and 'position' in addition to '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.

Upvotes: 295

pedram shabani
pedram shabani

Reputation: 1680

I think you can use this code also: and you can manage your class css better 

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

Upvotes: 3

themhz
themhz

Reputation: 8424

you could also specify multiple style values like this 

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

Upvotes: 6

Suresh Atta
Suresh Atta

Reputation: 122026

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

It seems a typo there ...syntax mistake :))

Upvotes: 15

Jakub Kotrs
Jakub Kotrs

Reputation: 6244

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

not a colon, a comma

Upvotes: 23

Related Questions