change the Style Attribute value

Question

How can I get and change the Style Attribute property value

Example

<div id="styleChanger" style="color: rgb(163, 41, 41);">
   // some content
</div>

How can I change the Style property color value

Answer 1

Every CSS declaration, inline (aka style attribute), in the page header or in an external file, is just incorporated into the DOM object attributes once the browser has read it.

This is to say that you're not actually interested in changing the style attribute, but an attribute of the object you're working on in Javascript. For CSS attributes, jQuery's .css() method is the answer.

$('#styleChanger').css("color","red");

Answer 2

You need a ready class, for example:

.interactClass {
    color: #d2232a;
}

and then you can

$('#styleChanger').removeClass().addClass('interactClass');

Or you can switch single properties with css method:

$('#styleChanger').css("color", "#D2232A").css("font-size", "20px");

Answer 3

Use the css() method in jQuery. Here is a link to the documentation: http://docs.jquery.com/CSS/css#name

This will allow you to do something like:

$("#styleChanger").css("color", "#888888");