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
Change the value of the element's
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
someElement is retrieved, and its
color property is set to
red. Assuming this element is ...