Learning jQuery 3 - Fifth Edition

A simple style switcher

To illustrate some event handling techniques, suppose we wish to have a single page rendered in several different styles based on user input; we will present buttons that allow the user to toggle between a normal view, a view in which the text is constrained to a narrow column, and a view with large print for the content area.

Progressive enhancementIn a real-world example, a good web citizen will employ the principle of progressive enhancement here. In Chapter 5, Manipulating the DOM, you will learn how we can inject content like this style switcher right from our jQuery code, so that users without JavaScript available will not see nonfunctional controls.

The HTML markup for the style switcher is as follows:

 <div ...