JavaScript Workshop » Styling with the DOM

Every element in a document is an object. Every one of these objects has a whole collection of properties as we have discussed in previous meetings. There's one property called style which every element node has. It contains information about the styles attached to the element. Querying this property doesn’t return a simple string, it returns an object. Style information is stored as properties of this style object:

element.style.property

Here’s an example of a paragraph with some inline styling:

 
<div id = ”example” style = “font-family: ‘Arial’, san-serif;”>
An example of a paragraph.</div>
 

Using the style property you can retrieve this stylistic information.

var para = document.getElementById(“example”);

To verify that the style property is an object:

alert(typeof para.style);

To retrieve the the font of the style:

alert(para.style.fontfamily);

The DOM camelCases style properties that have more than one word. The CSS property "font-family" becomes the DOM property fontFamily.

There is a big caveat to retieving stylistic information with the style property. The style property only returns inline style information. So if you add an external style sheet or even put the style in the tags it will not retrieve the information.

So the really only good use of using the style property is if you apply stylistic information via the DOM. If you do this it will pick it up as if it were inline. This is useful if you are dynamically updating or modifying elements on a page and want to also change the style of those particular elements for a more visual effect. (table hightlighing, form validation, hiding/showing, drag and drop, animation, etc.)