optimal application of css with jquery

Question

I have a question about using jQuery to set the padding of a class or id. I am able to successfully change the height of an element with this code:

$('.menu').css({ height: '90px' });

But now, I need to apply a specific CSS rule in jQuery:

style.css

#mainNav > .nav > li.active > a, #mainNav > .nav > li.active {
    padding-top: 10px;
 }

I tried to translate this into jQuery like so, but it didn't work:

$('#mainNav > .nav > li.active > a, #mainNav > .nav > li.active').css({ padding-top: '10px'});

Can anyone help me figure out how to do this correctly? Thank you!

Answer 1

Answer №1

It is not recommended to use a minus sign in your unquoted key name (padding-top). You have two options:

Change it to camelCase:

$('#mainNav > .nav > li.active > a, #mainNav > .nav > li.active').css({ paddingTop: '10px'});

Enclose it in quotes:

$('#mainNav > .nav > li.active > a, #mainNav > .nav > li.active').css({ "padding-top": '10px'});

Both methods achieve the same result, so the choice is yours.

Answer 2

It is not recommended to use a minus sign in your unquoted key name (padding-top). You have two options:

Change it to camelCase:

$('#mainNav > .nav > li.active > a, #mainNav > .nav > li.active').css({ paddingTop: '10px'});

Enclose it in quotes:

$('#mainNav > .nav > li.active > a, #mainNav > .nav > li.active').css({ "padding-top": '10px'});

Both methods achieve the same result, so the choice is yours.

Answer 3

To add padding to the top, you can either use the "padding-top" property or simply "paddingTop" like shown below:

$('#mainNav > .nav > li.active > a, #mainNav > .nav > li.active').css({ "padding-top": '10px'});

or

$('#mainNav > .nav > li.active > a, #mainNav > .nav > li.active').css({ paddingTop: '10px'});

Answer 4

To add padding to the top, you can either use the "padding-top" property or simply "paddingTop" like shown below:

$('#mainNav > .nav > li.active > a, #mainNav > .nav > li.active').css({ "padding-top": '10px'});

or

$('#mainNav > .nav > li.active > a, #mainNav > .nav > li.active').css({ paddingTop: '10px'});