Setting style/css class of html elements from javascript

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

Css Property	JavaScript Equivalent
background	background
background-color	backgroundColor
background-image	backgroundImage
border	border
clear	clear
color	color
display	display
float	cssFloat
Font-family	fontFamily
Font-size	fontSize
Font-weight	fontWeight
height	height
Left	left
list-style	listStyle
list-style-image	listStyleImage
margin	margin
Text-decoration	textDecoration
vertical-align	verticalAlign
Visibility	visibility
Width	width
z-index	zIndex

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

Related Posts

• Why you MUST use client side validation
• Filling a select box using javascript and jQuery
• 8 blogs you must read if you are a web developer
• jQuery Tip: Finding tag name of an element
• 61 jQuery Image and gallery plugins