Chapter 12. Cutting through attributes, properties, and CSS

 

This chapter covers

  • Understanding DOM attributes and DOM properties
  • Dealing with cross-browser attributes and styles
  • Handling element dimension properties
  • Discovering computed styles

Excepting the previous chapter, a large percentage of this book so far has dealt with JavaScript, the language. And although there are plenty of nuances to pure JavaScript as a language, once we throw the browser DOM into the mix, things can really get confusing.

Understanding DOM concepts and how JavaScript relates to these concepts is an important part of becoming a JavaScript ninja, especially considering the baffling ways that some DOM concepts seem to defy logic. The area of DOM attributes and properties has left many JavaScript page authors quivering with confusion. Not only are there some very nuanced behaviors between attributes and properties, but there are also few other areas that are more riddled with bugs and cross-browser issues.

But attributes and properties are important concepts: attributes are an integral part of how the DOM gets built, and properties are the primary means by which elements hold runtime information, and by which this information can be accessed.

Let’s take a look at a quick example that demonstrates the capacity for befuddlement:

12.1. DOM attributes and properties

12.2. Cross-browser attribute issues

12.3. Styling attribute headaches

12.4. Fetching computed styles

12.5. Summary