Increase font size of whole web page on button click event using jquery

Question

I want to increase font size in whole page when user click on increase button. It will be increase on bases of current font size. Following is sample code :

Answer 1

In addition to my previous comment, here is what I've made so far (again, assuming that you can't modify the HTML part) : http://jsfiddle.net/wared/JWUt9/. This solution is a bit dirty since it adds a style attribute and binds an extra font-size data to every element matched by the selector (in this case : p *). Furthermore, we have to loop through the entire set each time the user clicks the resize button. However, it allows to override fixed sizes defined from non inline styles.

If we had control over non inline styles, we could replace all fixed sizes from there by hand with em units for example, and we could do the same with inline fixed sizes via javascript. In the end, we could zoom in and out by simply modifying the container's font-size property, and descendant elements should resize automatically. Here is an interesting example from which we could start (scroll down a little to the first codepen demo) : http://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing/.