Learning PHP, MySQL & JavaScript, 4th Edition

Chapter 20. 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 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 you don’t have to pre-create elements in HTML just in case JavaScript may need to access them later.

Revisiting the getElementById Function

To help with the examples in the rest of this book, I would like to provide an enhanced version of the getElementbyId function, for handling DOM elements and CSS styles quickly and efficiently, without the need for including a framework such as jQuery.

However, to avoid conflicting with frameworks that use the $ character, I’ll use the uppercase O, since it’s the first letter of 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(i)
{
  return document.getElementById(i)
}

This alone saves 22 characters of typing each time it’s called. But I choose to extend the function a little by allowing either an ID name or an object to be passed to this function, as shown in the complete version of the function in Example 20-1 ...