HTML, XHTML, and CSS Bible, Fourth Edition

Chapter 36. Dynamic HTML with CSS

IN THIS CHAPTER

• Accessing CSS properties with JavaScript

• Useful CSS manipulation

CSS can be a powerful tool for creating dynamic pages with special effects. In this chapter, you see how you can change a CSS property dynamically in various browsers. Here, you'll see how to access CSS properties and script them to perform tasks, such as change text colors. You'll see that every CSS property can be changed programmatically.

You'll also find that some browsers, most notably Internet Explorer, feature CSS-like syntax for creating dynamic filtered effects such as drop shadows and blurs.

Accessing CSS Properties with JavaScript

Mozilla and Internet Explorer (IE) browsers make CSS1 element properties accessible from JavaScript through their Document Object Model (DOM). However, the Mozilla DOM and Internet Explorer DOM are different. They both implement parts of the W3C CSS2 standards, but they consistently cover different areas, so CSS2 JavaScript code on one browser may not work on other browsers. Note that the Gecko layout engine covers all of the properties in W3C CSS2 standards.

Generally, CSS properties are all accessed the same way, via reading values as properties and setting values via methods. To access the CSS properties in script, you use the property name, unless there's a hyphen in the name. In the case of hyphenated property names, delete the hyphen and uppercase the next letter. The rest of the property name remains in lowercase. For example: