Updating a CSS class property in real-time  

I was wondering if there is a way to update a CSS class property in real-time.

The idea

The idea here would be to update the CSS class property after an HTML page has been fully uploaded by the web client so that by updating this property all the elements in the page that have that class are automatically updated without the need to iterate over each element individually in JavaScript (this is how I do it but I wonder if there is a more efficient, and elegant, way to do it).

Example

For example, imagine a CSS class that simply sets the background-color of an element to "red" and 3 elements in an HTML page that are members of this class. I would like to be able to update the class by setting the background-color of the class to "blue" and as soon as I do that, the web client changes (on its own) the background color of the 3 elements to blue. All of this must happen on the web client (NOT on the server) AFTER the HTML page has loaded (maybe as the result of a DOM event that triggers the update of the CSS class property).

A better approach?

In the example above, the usual approach is to get (using JavaScript) a list of all the elements that share that CSS class attribute and then iterate over each element in the list to update the background-color style of the element itself (the CSS class definition remains unchanged). This certainly does the work but it seems like there should be a better way to accomplish the same task.

Any ideas?