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 ListsThis example demonstrates how DHTML can be used to create collapsible lists. Source 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 the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
