Learning PHP, MySQL, JavaScript, CSS & HTML5, 3rd Edition

Chapter 21. Accessing CSS from JavaScript

With a good understanding of the DOM and CSS now under your belt, you’ll learn in this chapter how to access both the DOM and CSS directly from JavaScript, enabling you to create highly dynamic and responsive websites.

I’ll also show you how to use interrupts so that you can create animations or provide any code that must continue running (such as a clock). Finally, I’ll explain how you can add new elements to or remove existing ones from the DOM so that you don’t have to pre-create elements in HTML just in case JavaScript may need to access them later.

Revisiting the getElementById Function

In Chapter 14, I mentioned the common usage of the $ character as a function name to provide easier access to the getElementById function. In fact, major frameworks such as jQuery use this new $ function, and substantially extend its functionality too.

I would also like to provide you with an enhanced version of this function, so that you can handle DOM elements and CSS styles quickly and efficiently. However, to avoid conflicting with frameworks that use the $ character, I’ll simply use the uppercase O, because it’s the first letter of the word Object, which is what will be returned when the function is called (the object represented by the ID passed to the function).

The O function

Here’s what the bare-bones O function looks like:

function O(obj)
{
  return document.getElementById(obj)
}

This alone saves 22 characters of typing each time it’s called. But I choose ...