Example 1: Style Sheet Switcher

This function is an extreme simplification of the technique employed in Invasion of the Body Switchers (http://alistapart.com/articles/bodyswitchers) by Andy Clarke and James Edwards. It also makes use of John Resig’s addEvent( ) function (http://quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html) for simple event management. It uses a single external CSS file to handle three different font sizes for the browser. We are going to change the font size of the page by changing a class on the body element.

We start with the external style sheet (switcher.css):

body.normal {
  font-size: 80%;
}
body.large {
  font-size: 100%;
}
body.huge {
  font-size: 150%;
}
h1 {
  font-size: 2em;
}
p {
  font-size: 1em;
}

Then we have our XHTML page, with a link to our CSS file, and a placeholder script referring to our JavaScript file (switcher.js):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Switcher Example</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="Content-Language" content="en-us" /> <link rel="stylesheet" type="text/css" media="screen" href="switcher.css" /> <script type="text/javascript" src="switcher.js"></script> </head> <body class="normal"> <div id="content"> <h1>Title</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </div> <div> <form id="switcher_form" ...

Get Web Design in a Nutshell, 3rd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial