Learning PHP, MySQL & JavaScript, 7th Edition

Chapter 19. 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 time-based events 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 precreate 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 abbreviated version of the getElementById function (which returns an element object when passed an ID name). This will allow for handling DOM elements and CSS styles quickly and efficiently, without the need for including a framework such as jQuery.

I’ve selected a name that is short to type yet it still explains what the function does: it returns an object represented by the ID passed to the function when called.

Note

It is highly unlikely you will use the following functions in development code, because you will probably have a custom-made or third-party framework to provide this functionality, plus a whole lot more. But they serve to keep the examples in this book short and easy to follow, as well as being a simple example of how new JavaScript functions can be added.