apply css style in HTML usin jQuery?

Question

I have a list in HTML with id of 'nav'. I want to apply CSS style to it using jQuery. How do I do it. I have tried couple of things and failed. Please help. I am new to jQuery and learning the basics now. thanks

What does your HTML markup look like and what have you tried so far that failed? — FarligOpptreden
– FarligOpptreden, Commented Feb 8, 2012 at 12:47
Show us what you did and failed with. It's easier to help when we have code in front of us. — Niklas
– Niklas, Commented Feb 8, 2012 at 12:48

Subash · Accepted Answer · 2015-07-30 01:50:28Z

6

You can do the following:

$('li#nav').css('background','green');

$('li#nav') selects the list element. Then .css('background','green') applys green background to the li element.

Or you can do this:

Create a CSS class in your CSS file with a class

.list-style{
   backbround : Green;
}

then in your jQuery write following:

$('li#nav').addClass('list-style');

edited Jul 30, 2015 at 1:50

answered Feb 8, 2012 at 12:56

Subash

7,3068 gold badges47 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mariusz Jamro · Accepted Answer · 2012-02-08 12:47:51Z

1

Have you at least seen the manual? There are examples there: http://api.jquery.com/css/

answered Feb 8, 2012 at 12:47

Mariusz Jamro

31.9k25 gold badges129 silver badges170 bronze badges

1 Comment

Joel Etherton Over a year ago

This is more of a comment than an answer.

Sagar Patil · Accepted Answer · 2012-02-08 12:49:31Z

1

Try this:

$(document).ready(function(){
    /* Single style */
    $('#nav').css('property','value');

    /* Multiple styles */
    $('#nav').css({'property1':'value1', 'property2':'value2', ...});
});

You can read more about CSS and Jquery here - http://api.jquery.com/css/

answered Feb 8, 2012 at 12:49

Sagar Patil

1,94813 silver badges21 bronze badges

Comments

Roberto Linares · Accepted Answer · 2012-02-08 12:48:27Z

0

You can use the .css() jQuery function to get/set style rules to an element or a group of elements. Example:

$("#myDiv").css("display", "none");
$("input#myButton").css("background-color", "red");

answered Feb 8, 2012 at 12:48

Roberto Linares

2,2253 gold badges23 silver badges35 bronze badges

Comments

Abhishek · Accepted Answer · 2012-02-08 12:49:24Z

0

use this syntax

$('#nav').css('background','black');

answered Feb 8, 2012 at 12:49

Abhishek

1631 gold badge2 silver badges6 bronze badges

Comments

Shyju · Accepted Answer · 2012-02-08 12:51:09Z

0

Use the CSS method

 $("#nav").css("color","red");

If you have a css class with some style definition, you may use the addClass method

$("#nav").addClass("myCSSStyle")

Working sample : http://jsfiddle.net/WRYKB/

HTML

<ul id="nav">
    <li>One</li>
    <li>Two</li>
</ul>
<ul id="nav2">
    <li>One</li>
    <li>Two</li>
</ul>

Javascript

$(function(){   
    $("#nav").css("color","red");    //setting css property to element
    $("#nav2").addClass("myCSSStyle")  //applying css class
});

CSS

.myCSSStyle
{
  color:blue;
   font-weight:bold; 

}

answered Feb 8, 2012 at 12:51

Shyju

220k106 gold badges421 silver badges499 bronze badges

Comments

Gurvinder · Accepted Answer · 2012-02-08 12:51:10Z

0

You can add class to your nav like this

$("#nav").addClass("myClass yourClass");

For more info you can refer http://api.jquery.com/addClass/

answered Feb 8, 2012 at 12:51

Gurvinder

7902 gold badges8 silver badges17 bronze badges

Comments

user1921 · Accepted Answer · 2012-02-08 12:51:18Z

0

From the API documentation (which you SHOULD have read)

$("p").addClass("myClass yourClass");

This method is often used with .removeClass() to switch elements' classes from one to another, like so:

$("p").removeClass("myClass noClass").addClass("yourClass");

answered Feb 8, 2012 at 12:51

user1921

Comments

Mythli · Accepted Answer · 2012-02-08 12:54:49Z

0

This is not that hard ;)

HTML Code

<div id="navi" style="color: black">
    HALLO
</div>

Javascript

$(document).ready(function() {
  $("#navi").css("color", "red")
  // Handler for .ready() called.
});

edited Feb 8, 2012 at 12:54

answered Feb 8, 2012 at 12:49

Mythli

6,4252 gold badges27 silver badges31 bronze badges

1 Comment

Jørn Jensen Over a year ago

Did you intend the two links to be the same?

Collectives™ on Stack Overflow

apply css style in HTML usin jQuery?

9 Answers 9

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related