How to create buttons to increase / decrease font?

I am using the previous answer and adapting it to a script that works for all tags, including those that belong to a parent within the element itself.

In this case, you should only choose a parent element where changes in font size should happen, in my example it is #content :

var $btnAumentar = $("#btnAumentar");
var $btnDiminuir = $("#btnDiminuir");
var $elemento = $("body #content").find("*"); //encontra todos os elementos dentro do #content
var fonts = [];

function obterTamanhoFonte() {
  for (var i = 0; i < $elemento.length; i++) {
    fonts.push(parseFloat($elemento.eq(i).css('font-size')));
  }
}
obterTamanhoFonte();
$btnAumentar.on('click', function() {
  for (var i = 0; i < $elemento.length; i++) {
    ++fonts[i];
    $elemento.eq(i).css('font-size', fonts[i]);
  }
});

$btnDiminuir.on('click', function() {
  for (var i = 0; i < $elemento.length; i++) {
    --fonts[i];
    $elemento.eq(i).css('font-size', fonts[i]);
  }
});

h3{
  font-size: 24pt;
}
p{
  font-size: 14pt;
}
a{
  font-size: 10pt;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc=""></script>

<button type="button" id="btnAumentar">Aumentar fonte</button>
<button type="button" id="btnDiminuir">Diminuir fonte</button>

<div id="content">
  <h3>Neque porro quisquam</h3>
  <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
    <a>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</a>
  </p>
</div>

As I saw you are using jQuery in your code I made an example:

You can get the font size of the element you want, class or whatever, and at the click of the button increase or decrease the font.

var $btnAumentar = $("#btnAumentar");
var $btnDiminuir = $("#btnDiminuir");
var $elemento = $("body p");

function obterTamnhoFonte() {
  return parseFloat($elemento.css('font-size'));
}

$btnAumentar.on('click', function() {
  $elemento.css('font-size', obterTamnhoFonte() + 1);
});

$btnDiminuir.on('click', function() {
  $elemento.css('font-size', obterTamnhoFonte() - 1);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttontype="button" id="btnAumentar">Aumentar fonte</button>
<button type="button" id="btnDiminuir">Diminuir fonte</button>
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>

$(document).ready(function () {
    var section = new Array('span', 'li', 'b', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'table', 'div');
    section = section.join(',');

    // Reset Font Size
    var originalFontSize = $(section).css('font-size');
    $(".resetFont").click(function () {
        $(section).css('font-size', originalFontSize);
    });

    // Increase Font Size
    $(".increaseFont").click(function () {
        var currentFontSize = $(section).css('font-size');
        var currentFontSizeNum = parseFloat(currentFontSize, 5);
        if (currentFontSizeNum < 20) {
            var newFontSize = currentFontSizeNum * 1.2;
            $(section).css('font-size', newFontSize);
        }
        return false;
    });

    // Decrease Font Size
    $(".decreaseFont").click(function () {
        var currentFontSize = $(section).css('font-size');
        var currentFontSizeNum = parseFloat(currentFontSize, 5);
        if (currentFontSizeNum > 10) {
            var newFontSize = currentFontSizeNum * 0.8;
            $(section).css('font-size', newFontSize);
        }
        return false;
    });
});

His problem is that the reset is not bringing the pattern back to the site

I thought about using the reset to reload the CSS file

But I do not know mt well how fzr this, what I tried aki n worked mt well

I would solve this as follows. - Javascript to add a class in your body / html to be used as master selector that determines the font - Css that controls the affected elements.

// css
body.fontSize10 {
  h1 {
    font-size: 10px;
  }
}

body.fontSize11 {
  h1 {
    font-size: 11px;
  }
}

body.fontSize12 {
  h1 {
    font-size: 12px;
  }
}

// js /jquery
$(function ($) {

  $('body').data('fontSize', 0)

  function UpdateFontSize() {
    var $body = $('body')
    var fz = $body.data('fontSize')
    var bodyClass = 'fontSize'+ fz ? fontSize.toString() : ''
    if (fz > 0){
      $body.addClass(bodyClass)
    }
  }

  $('#incrementFontSize').on('click', function (e) {
    var $body = $('body')
    var fz = $body.data('fontSize')
    $body.removeClass('fontSize'+fz).data('fontSize', fz + 1)
    UpdateFontSize()
    e.preventDefault()
  })

  $('#decrementFontSize').on('click', function (e) {
    $body.removeClass('fontSize'+fz).data('fontSize', fz - 1)
    UpdateFontSize()
    e.preventDefault()
  })

})()

In this way, you can more easily control the elements affected by incrementing / decreasing the font.

Doing all this with only js can be very slow, and you may have to make multiple IFs in the middle of the code. The maintenance will be much more annoying, apart from when adding a new element in the html, you will have to change your javascript.

Through css you can control all elements with css only.

I had to do this once in a project, see if it works for you:

function strReplace(haystack, needle, replacement) {
    var temp = haystack.split(needle);
    return temp.join(replacement);
}

 $(document).ready(function(){

    var div = '#content',
        contador = 0,
        obj_tratados = [
                        div,
                        div + ' p',
                        div + ' h1'
                       ],
        reset_fonte = [],
        reset_linha = [];

    setDefaultZoom(obj_tratados, reset_fonte, reset_linha, contador);

    $('#a_mais,#a_menos,#a_reset').on('click', function() {
       var id = $(this).attr('id');
        var min = 9;
        var max = 28;

        for (var i in obj_tratados) {

            var tratados = $(obj_tratados[i]);
            var tamanho_fonte = strReplace(tratados.css('fontSize'), 'px', '');
            var tamanho_entrelinha = strReplace(tratados.css('lineHeight'), 'px', '');

            switch (id) {
                case 'a_mais':
                    if (tamanho_fonte <= max) {
                        tamanho_fonte++;
                         // tamanho entrelinha aumento
                         tamanho_entrelinha = (tamanho_fonte * 1.8);
                         tamanho_entrelinha++;
                        contador++;

                    }
                    break;
                case 'a_menos':
                    if (tamanho_fonte >= min) {
                        tamanho_fonte--;
                       // tamanho entrelinha redução;
                        var val = tamanho_entrelinha - (tamanho_entrelinha * 3 / 100);
                       // tamanho_entrelinha = arredondarValor(val);
                       tamanho_entrelinha = (tamanho_fonte * 1.8);
                        tamanho_entrelinha--;
                        contador++;

                    }
                    break;
                case 'a_reset':
                default:
                    // resetar 
                    tamanho_fonte = reset_fonte[i];
                    tamanho_entrelinha = reset_linha[i];
                    break;
            }
            tratados.css({'fontSize': tamanho_fonte + 'px', 'lineHeight': tamanho_entrelinha + 'px'});
        }
       //cancel a click event
        return false;
    });

    function setDefaultZoom(obj_tratados, reset_fonte, reset_linha, contador) {
        for (var i in obj_tratados) {

            var tratados = $(obj_tratados[i]);
            if (contador == 0) {
                reset_fonte[i] = strReplace(tratados.css('fontSize'), 'px', '');
                reset_linha[i] = strReplace(tratados.css('lineHeight'), 'px', '');
            }
        }
    }
});

HTML:

<span id="controle_zoom">
   <a href="javascript:void(0);" id="a_reset">A</a> | <a href="javascript:void(0);" id="a_mais">A+</a> | <a href="javascript:void(0);" id="a_menos">A-</a>
</span>

<div id="content">
  <h1>Título</h1>
    <p>O texto vem aqui</p>
</div>