Setting style/css class of html elements from javascript
Style of an html element can be set in 2 ways.
- Specify a css class name for the element.
- 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 :10pxdisplay: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
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Very helpful .. I am very new to CSS and stuff. But I was wondering over the ways to declare styles .. ones with # and others with . — which in HTML are then used through either ID or class attribute.
For changing styles through JS, is it necessary to have styles defined with a . (dot) ?
[...] a countdown timer in javascriptFAQ : How to toggle visibility of an html element by javascriptSetting style/css class of html elements from javascript FAQ : Problem with javascript function [...]
Thanks for this very much helpful article.
will -webkit-border-radius become WebkitBorderRadius?