Style of an html element can be set in 2 ways.

1. Specify a css class name for the element.
2. Set the style inline for the element.

//Method 1:
<p class="boldText">Some text</p>
//Method 2:
<p style="font-weight:bold;">Some text</p>

Therefore using these 2 attributes we can change the style of any html element in the page. The only thing we need to do is get hold of these attributes in JavaScript and manipulate them.Fortunately accessing a DOM element in JavaScript gives us access to all its attributes. What we get is a DOM object which has the attributes of the element as its properties. So we can perform the same operations we do upon objects.

Changing the css class of an element is quite easy.

Suppose you have a p element on the page and a css defined in your css file

<p> This is some text</p>;

.redText { color : red; }

To change or set the class name for this p

var x = document.getElementById('myPara');
x.className = "redText";

and you are done.

className property changes the class of the specified element. You can specify more then one class, just remember to separate them with a whitespace.

x.className = "redText noBorder";

The other method is setting the inline style for the element. When using the style property we specify the styles as key value pairs.

style="margin-left :10px; display:inline; float:left;"

The style attribute and all of its properties are also available in JavaScript. Style can be set as follows:

element.style.propertyName = value;

But there is a catch here. We cannot do

element.style.margin-left = "red";

as JavaScript would interpret the hyphen as subtraction operator and it will attempt

(element.style.margin) - left = "10px";

which is not what we expect from it. There is a special pattern while mapping these html properties to javascript. Properties which do not have a hyphen remain the same while those with a hyphen are converted to lower camel case and the hyphen is removed , which means display will remain display but margin-left will become marginLeft .

So the correct synatx would be

element.style.marginLeft = "10px";

However there is one exception to the above rule. float property becomes cssFloat as float is a keyword.

element.style.float = "left"; // incorrect
element.style.cssFloat = "left"; // correct

Some common properties and their javascript counterparts are as follows

Give this page a Thumbsup on Stumbleupon if you liked this.