Understanding CSS DOM

The CSS DOM is a unconventional term used to define the application of CSS in HTML DOM. With this you can apply CSS style definitions to any object using DOM. Now you are already aware about basics of DOM.

To start with as usually you should know little HTML, CSS, Javascript & Dreamweaver MX or later. CSS DOM works similarly as CSS but, you are applying it through DOM using JavaScript.

There are basically two methods to apply DOM CSS to an element:

1. Direct CSS class application method
2. DOM Style method

Direct CSS class application method

In this method you are going to apply an already existing CSS class to an HTML element using JavaScript. Here’s the example.

Here’s a DIV tag where a CSS class applied to it,

<div id=”myObject” class=”sampleClass”>My HTML Object</div>

.sampleClass {
color: #000000;
text-decoration: none;
}
.newClass {
color: #FFFFFF;
text-decoration: underline;
}

Now I’m going to manipulate the CSS class name into a different one using JavaScript.

Function ChangeClass() {
document.getElementById(“myObject”).className=”newClass”
}

We’ve to trigger this function using any methods discussed in the previous article.

<input type=”button” name=”button1″ onclick=”ChangeClass()” />

DOM Style Method

This is a very common method used to apply CSS style definition to any object without having any existing CSS class. Here is an example.

<div id=”myObject”>My HTML Object</div>

Now I’m going to apply style definitions to this object,

Function ApplyStyle() {
document.getElementById(“myObject”).style.color = “#000000″
document.getElementById(“myObject”).style.fontFamily = “verdana”
document.getElementById(“myObject”).style.fontSize = “11px”
document.getElementById(“myObject”).style.display = “inline”
}

Same way we’ve to trigger this function using any methods discussed in the previous article.

<input type=”button” name=”button1″ onclick=”ApplyStyle()” />

More DOM CSS properties

Help from Dreamweaver 8 method

For more DOM CSS properties you can refer to “Reference” section of Dreamweaver MX or later. To do it follow this procedure: Goto ”Window” menu from menu bar and select “Reference” or press “Shift + f1″ key to open reference window. From “Book” dropdown select “O’RIELLY CSS Reference”. Now select any definition name from “Style” dropdown, and say “font-family” or “Background”. Now you can see detailed description about the each attribute and their values. Look for “Object Model Reference” you will find the way to locate the object(document.getElementById), you can find all properties and values of that object. Similarly you can do this for almost all other styles too. You can execute all properties with the help of above mentioned examples.