Possible Duplicate:
Allow users to change font size in a webpage
Hello,
I have some webpages. I would like the user to click an image and have the font-sizes of all of the content on the page increase. Is this possible? If so, how?
I know that the browsers have options inside of them. Basically, I want a way to do that in the page itself.
Thank you.
If you increase the font size of a top-level element like <body>, then that [changed] size will be inherited by its child elements (assuming that other CSS rules for those element didn't override that size with an absolute value, which would also have messed up the user's changing font size in their browser).
This article (for example) says that it describes how to change CSS values programatically.
Three things to achieve this:
Specify the overall font-size in the <body> tag. For example:
body { font-size: 100%; }
Don't use pixels to specify font-size anywhere else in the document.
p.somePara { font-size: 120%; }
p.anotherPara { font-size: 1.4em; }
Attach an event handler to this image, to adjust the font size accordingly. Using jQuery, for example:
$("#largerTextImage").click(function() {
$("body").css("fontSize", "120%");
});
Done.
I would say that you could switch css.
Put all your font-sizes in a separated CSS file. Then duplicate this file and change the font sizes. Then use a piece of js script to swich css files.
There are a lot of tutorials up there that explain all about it. Here's one.