This is a html code and JavaScript snippet that can create two buttons which will increase font size with on page buttons.

On page font size adjust using JavaScript buttons

For impatients see demo here

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<button onclick="make_small()">-</button> 
<button onclick="make_big()">+</button>
<h1>Click to change size</h1>
how ever there is range limit
<br>Minimum: <input type="text" id="min_val" value="8" style="width:25px">
<br>Maximum: <input type="text" id="max_val" value="25" style="width:25px">
<script type="text/javascript">
 
function make_big(){
max_font = document.getElementById('max_val').value;
var body_el = document.getElementsByTagName("body")[0];
var x = body_el.style.fontSize;
x = x.slice(0,-2);
if (x=='') { x = 15 ;}
if(x>max_font){
throw new Error("Something went badly wrong!");
}
x++;
//alert(x);
body_el.style = "font-size:" + x + "px";
var x = body_el.style.fontSize;
}
 
function make_small(){
min_font = 8;
var body_el = document.getElementsByTagName("body")[0];
var x = body_el.style.fontSize;
x = x.slice(0,-2);
if (x=='') { x = 15 ;}
if(x<min_font){
throw new Error("Something went badly wrong!");
}
x--;
//alert(x);
body_el.style = "font-size:" + x + "px";
var x = body_el.style.fontSize;
}
 
</script>