22.3. Dynamic HTML

Dynamic HTML (DHTML) involves using scripts to manipulate elements within a document. The result is the creation of dynamic content (document automation, animation, and so on). Such manipulation usually involves CSS styles — the manipulation of an element's style is very efficient.

To access and manipulate document elements, you can use either of the two DOMs, the W3C DOM discussed in Chapter 21 or the JavaScript DOM provided via the objects discussed earlier in this chapter.

One popular DHTML technique is to hide or reveal document elements. You can use this to create drop-down text, collapsible outlines, and more.

Example: Using DHTML for Collapsible Lists

This example demonstrates how DHTML can be used to create collapsible lists.


This code uses two classes, one to show the list items, the other to hide the list items.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Hidden Text</title> <style type="text/css"> ul.hidelist li { display: none; } ul.showlist li { display: block; } </style> <script type="text/JavaScript"> function hideNreveal(list) { if (list.className == "hidelist") { list.className = "showlist"; } else { list.className = "hidelist"; } } </script> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ...

Get Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.