Javascript text Resizer, JavaScript Tutorial to change font-size, Dynamically change font size, JavaScript font resize

To achive web accessibility we need to implement Text resizer to our Website.

Which help users to see properly who are facing visibility disorder.

Here I am providing the Javascript code for Text resizer which enable site to increase its font upto 200%;

//Specify affected tags. Add or remove from list:
var tgs = new Array( 'div','td','tr','h3','h4');
//var tgs = new Array( 'div');

//Specify spectrum of different font sizes:
var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );
var startSz = 2;

function ts( trgt,inc ) {
 if (!document.getElementById) return
 var d = document,cEl = null,sz = startSz,i,j,cTags;
 
 sz += inc;
 if ( sz < 0 ) sz = 0;
 if ( sz > 6 ) sz = 6;
 startSz = sz;
  
 if ( !( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ];

 cEl.style.fontSize = szs[ sz ];

 for ( i = 0 ; i < tgs.length ; i++ ) {
  cTags = cEl.getElementsByTagName( tgs[ i ] );
  for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ];
 }
}

Coustomization:

Tags :
here need to put those HTML tags of which content you want to increase. Javascript will find those tags and increase/Decrease their size to next level. 

var tgs = new Array( 'div','td','tr','h3','h4');

Increase / Decrease Level:
its a array which define the increase level of text.  we can also put their font-size in px.

var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );

its show the default value of array about font size of website will be on page load.

var startSz = 2;

How to use:
to use this script code we use Javascript function ts with two argument. First argument is id name of which content we need to be increase/Decrease.
Second argument is use as symbol of Increase / Decrease font.


javascript:ts(ID,1)  // 1 for increase Font size 

javascript:ts(ID,-1)  // -1 for Decrease font size
JavaScript:location.reload(true);  // Reset font size

<a href="javascript:ts('divcontent',-1)">Smaller</a> // For Decrease
<a href="javascript:ts('divcontent',1)">Large</a> // For increase
<a href="JavaScript:location.reload(true);"> Normal</a>  // Reset Font size