Easy way to change the FontSize of the whole html document

Question

Is there any standard approach to changing the font size of the whole HTML document?

I'm thinking of two buttons, one that increases font size and another that decreases font size. Both of these buttons calls a JavaScript function;

function increaseFontSize(){
//Increase the font size for the whole document
}

function decreaseFontSize(){
//Decrease the font size for the whole document
}

Question

How do I do this? Is there a more simple way than the one that I stated above?

Edit

I'm using Bootstrap, which comes with it's own CSS for each HTML element. Bootstrap defines the default (body) font size as 14px.

Answer 1

You need to target the font-size style of the HTML element. You'll have to make sure that an initial value exists so that you can easily modify it.

You can do so in the following manner:

document.getElementsByTagName( "html" )[0].style[ "font-size" ] = "10px"

All that is left to do is implement the increments of the value:

function increaseFontSize(){
    var existing_size = document.getElementsByTagName( "html" )[0].style[ "font-size" ];
    var int_value = parseInt( existing_size.replace( "px", "" );
    int_value += 10;
    document.getElementsByTagName( "html" )[0].style[ "font-size" ] = int_value + "px";
}

I would recommend using a few helper functions to clean up this code:

function extract_current_size(){
  var existing_size = document.getElementsByTagName( "html" )[0].style[ "font-size" ];
  return parseInt( existing_size.replace( "px", "" );
}

function increaseFontSize(){
  var existing_value = extract_current_size()
  existing_value += 10;
  document.getElementsByTagName( "html" )[0].style[ "font-size" ] = existing_value + "px";
}