JavaScript® 24-Hour Trainer

Chapter 15. Modifying Element Style

Human beings are visual creatures. We can identify visual cues, no matter how subtle, and decipher their meaning. For example, the Windows operating system differentiates between active and inactive windows with visual cues––changing the color, the opacity, and other visual elements of the window. In Windows 7, inactive windows display themselves with more of a faded, transparent look than the color-rich, drop-shadow-encased active window. It's a subtle but effective means of telling users which window is currently active.

The ability to change how a particular user interface element looks is an extremely important feature of an application programming interface (API), and the DOM, combined with the styling power of CSS, gives you this ability.

In this lesson, you learn how you can leverage the power of the DOM and CSS to change the appearance elements in a web page. You can modify an element's style in two ways:

• Change individual CSS properties using the style property.

• Change the value of the element's class attribute.

USING THE STYLE PROPERTY

The style property is an object that maps to an element's style attribute. It provides access to individual CSS properties, allowing you to change all CSS properties that the browser supports. You access the style property like this:

document.getElementById("someElement").style.color = "red";

Here, an element with an id of someElement is retrieved, and its color property is set to red. Assuming this element is ...