Using jQuery you could do something like this:
$(function(){
$('#smallT').click(setTextToSmall);
$('#mediumT').click(setTextToMedium);
$('#largeT').click(setTextToLarge);
});
function setTextToSmall(evt)
{
$('.text-to-resize').addClass('small').removeClass('medium').removeClass('large');
}
// Have similar setTextTo.. functions for Medium and Large here
To clarify, this actually does use CSS to change the sizes. You would have three CSS classes named 'small', 'medium', and 'large':
.small { font-size: 0.5em; }
.medium { font-size: 1em; }
.large { font-size: 1.5em; }
The setTextToSmall() function is called when the user clicks on the small "T". It adds the class 'small' to all elements that already have a class of 'text-to-resize' and removes the 'medium' and large classes. So where you might have this before the click:
<div class="text-to-resize">Some sample text</div>
You would have this after the click:
<div class="text-to-resize small">Some sample text</div>
If you wanted to apply this to every element on the page then you would simply change setTextToSmall() to the following:
function setTextToSmall(evt)
{
$().addClass('small').removeClass('medium').removeClass('large');
}
The benefit of jQuery (or other frameworks for that matter) is that it abstracts out the DOM which is very tricky across different browsers. For example, to do this in straight Javascript you might instinctively want to use document.getElementsByClassName(). However, that method doesn't exist in any version of IE.