javascript – How to create buttons to increase/decrease font?

Question:

I would like to implement accessibility functions on the website of the company I work for.

I managed to implement the contrast button, but I'm having difficulty doing the increase/decrement and default font size.

Testing new projects the scripts I created/found on the internet work, but not on the website, I don't know if something is interfering, but it doesn't work. Can someone help me?

Below is the code I made for the contrast:

if (localStorage.getItem('accessibility') == 'on') {
  $("body").addClass("accessibility");
}
$(".contrasteOn").click(function() {
  localStorage.setItem('accessibility', 'on');
  $("body").addClass("accessibility");
});
$(".contrasteOff").click(function() {
  localStorage.setItem('accessibility', null); 
  $("body").removeClass("accessibility");
});

To change the colors I include in the CSS all the classes I wanted to change with the .accessibility before.

Answer:

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

In this case, you should just choose a parent element where changes in font size should happen, in my example it's #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>
<script src=""></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>

Post Views: 13