How to change CSS using jquery

Question

I am trying to change the css using jquery: (I am a very early jquery beginner)

$(init);

function init() {
 $("h1").css("backgroundColor", "yellow");

 $("#myParagraph").css({"backgroundColor":"black","color":"white");

 $(".bordered").css("border", "1px solid black");
}

What am I missing here?

thanks!!!

Answer 1

I didnt see the call to init at the top

You have to call init() otherwise no code will run. TRy getting rid of init and putting that code in $(document).ready();

$(document).ready(function() {

    $("h1").css("backgroundColor", "yellow");

    $("#myParagraph").css({"backgroundColor":"black","color":"white");

    $(".bordered").css("border", "1px solid black"); }

});

http://docs.jquery.com/Tutorials:How_jQuery_Works

Answer 2

You can do either:

$("h1").css("background-color", "yellow");

Or:

$("h1").css({backgroundColor: "yellow"});

Answer 3

Ignore the people that are suggesting that the property name is the issue. The jQuery API explicitly states that either notation is acceptable: http://api.jquery.com/css/

The actual problem is that you are missing a close curly brace on this line:

$("#myParagraph").css({"backgroundColor":"black","color":"white");

Change it to this:

$("#myParagraph").css({"backgroundColor": "black", "color": "white"});

Here's a working demo: http://jsfiddle.net/YPYz8/

Answer 4

To clear things up a little, since some of the answers are providing incorrect information:

---

The jQuery .css() method allows the use of either DOM or CSS notation in many cases. So, both backgroundColor and background-color will get the job done.

Additionally, when you call .css() with arguments you have two choices as to what the arguments can be. They can either be 2 comma separated strings representing a css property and its value, or it can be a Javascript object containing one or more key value pairs of CSS properties and values.

In conclusion the only thing wrong with your code is a missing }. The line should read:

$("#myParagraph").css({"backgroundColor":"black","color":"white"});

You cannot leave the curly brackets out, but you may leave the quotes out from around backgroundColor and color. If you use background-color you must put quotes around it because of the hyphen.

In general, it's a good habit to quote your Javascript objects, since problems can arise if you do not quote an existing keyword.

---

A final note is that about the jQuery .ready() method

$(handler);

is synonymous with:

$(document).ready(handler);

as well as with a third not recommended form.

This means that $(init) is completely correct, since init is the handler in that instance. So, init will be fired when the DOM is constructed.