Editing Dynamic HTML (section)

==Dynamic styles==

Dynamic styles are a key feature of DHTML. By using CSS, one can quickly change the appearance and formatting of elements in a document without adding or removing elements. This helps keep documents small and the scripts that manipulate the document fast.

The object model provides programmatic access to styles. This means you can change inline styles on individual elements and change style rules using simple JavaScript programming.

Inline styles are CSS style assignments that have been applied to an element using the style attribute. You can examine and set these styles by retrieving the style object for an individual element. For example, to highlight the text in a heading when the user moves the mouse pointer over it, you can use the style object to enlarge the font and change its color, as shown in the following simple example.

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Dynamic Styles</title>
    <style>
        ul { display: none; }
    </style>
</head>

<body>
    <h1 id="first-header">Welcome to Dynamic HTML</h1>

    <p><a id="clickable-link" href="#">Dynamic styles are a key feature of DHTML.</a></p>

    <ul id="unordered-list">
        <li>Change the color, size, and typeface of text</li>
        <li>Show and hide text</li>
        <li>And much, much more</li>
    </ul>

    <p>We've only just begun!</p>

    <script>
        function showMe() {
            document.getElementById("first-header").style.color = "#990000";
            document.getElementById("unordered-list").style.display = "block";
        }

        document.getElementById("clickable-link").addEventListener("click", function (event) {
            event.preventDefault();
            showMe();
        });
    </script>
</body>
</html>
</syntaxhighlight>