Dynamic Content with DOM-2 (Part II of II)
Pages: 1, 2, 3

Manipulating Element Styles

So far, I've only talked about manipulating element attributes. Often, an element will employ CSS to give it a particular style or formatting. Altering the CSS properties of an element requires a similar yet slightly different approach.

The DOM specification provides another interface called DOM Level 2 Style, which is for manipulating the CSS properties of an element. Each CSS rule for an element is represented as a property of the element's style object.

Because style is an object, we can examine its properties with a function similar to inspect(), above. The inspectStyle() function below checks the element in question for a style object before proceeding to inspect its values. As described Modifying Styles, a bug in the current releases of Netscape 6 and Mozilla prevents CSS rules in an inline stylesheet from populating the style object correctly in those browsers. So for the sake of this demonstration, all element CSS has been defined within the tags themselves via the STYLE attribute.

function inspectStyle(elm){
  if (elm.style){
    var str = "";
    for (var i in elm.style){
	  str += i + ": " + elm.style[i] + "\n";
	}
	alert(str);
  }
}

var header = document.getElementById("h2");
inspectStyle(header);

Click the button below to view the style properties of the H2 element below. Note: some users of IE 5.1 Preview for Mac OS X have expirenced problems with this script.

Headline Here

You'll notice that many of the style properties are empty, since we haven't defined them to be otherwise. You can set style properties directly. To read and then set the background color of an HTML page (or specifically, the background color of the BODY element):

var doc = document.getElementsByTagName("body").item(0);
var color = doc.style.backgroundColor;
alert ("Background color is: " + color);

doc.style.backgroundColor = "#0000ff";

Manipulating the CSS properties of elements is key to DHTML functionality. For example, you can use JavaScript to change the table's LEFT and BACKGROUND-COLOR CSS properties, thus changing its color and position on the page. Try it out:

Change Position
right 100px left 100px

Change Color:

Here's the JavaScript that makes it happen. In all cases, the table ID, tableMain3 is passed to getElementById() in order to get a reference to the table element. The new CSS property value is assigned directly to the style object.

<span class="sourcecode">
<script language="JavaScript" type="text/javascript">
  function tableRight(){
    var table = document.getElementById("tableMain3");
    table.style.left = "100px";
  }
  function tableLeft(){
    var table = document.getElementById("tableMain3");
    table.style.left = "0px";
  }
  function changeTColor(col){
    var table = document.getElementById("tableMain3");
    table.style.backgroundColor = col;
  }

To get the name of the scriptable style property, take the original style rule from the CSS declaration and capitalize the first letter following each hyphen, then remove the hyphens altogether. The following table contains a few examples:

From Here

This concludes our brief tour of the Document Object Model. We've touched on some of the more exciting features of the DOM, including dynamic element creation and setting element attributes and CSS properties through JavaScript. The DOM interface has many more features we didn't explore in these articles; I encourage you to check out the specification at the W3C site, specifically the ECMAScript bindings pages which describe the DOM Level 2 Core and Style scripting interface in more detail. Be sure to check your browser's documentation to see what DOM features it supports.

Scott Andrew LePera lives in San Francisco, where he ekes out a schizoid existence as both a web applications developer for KnowNow and a frustrated urban folk singer.

Previously in this series:

Dynamic Content with DOM-2 (Part I of II) -- The DOM-2 is supported in both Mac IE5 and NS6, and it provides an interface that enables developers to generate dynamic content without being limited to JavaScript trickery. This article explores some of the basic functionality of DOM-2.

Return to the JavaScript and CSS DevCenter.