JavaScript to achieve the click of the button font zoom in and out

This article to share js to achieve the click button font zoom in and out of the example code, the code is simple to understand, the need for a friend to refer to it

The specific code is as follows:

<style>
.bb{color:red;}
.cc{color:green;}
.chapter {font-size: 1.5em;}
.normal{font-size:12px;}
.hidden{display:none;}
</style>
<script>
$(document).ready(function() {
$('div.aa').addClass('bb');
$('a[href^="http:"]').addClass('cc');
//$('#switcher-large').on('click',function(){
// $('div.large').addClass('chapter'); 
//});
$('#switcher-large').click(function(){ 
$('div.large').toggleClass('chapter');
$(this).toggleClass('bb'); 
});
//$('#switcher').click(function(){// Click the button to add (remove) styles ( toggleClass Methods) 
//$('#switcher button').toggleClass('hidden');
//})
// Zooming in and out of font 
var $biger = $('div.large');
var num = parseFloat($biger.css('fontSize')); 
$('#switcher-bigger').click(function(){ 
num=num*1.4;
$biger.css('fontSize',num+'px');
});
$('#switcher-small').click(function(){
num=num/1.4;
$biger.css('fontSize',num+'px');
});
});
</script>
<div id="switcher" class="switcher">
<h3>Style Switcher</h3>
<button id="switcher-default"> Default </button>
<button id="switcher-hidden">Narrow hidden</button>
<button id="switcher-large">Large Print</button>
<button id="switcher-bigger">switcher-bigger</button>
<button id="switcher-small">switcher-small</button>
</div>
<div class="large">
<p> The home of the script </p>
<p> The home of the script </p>
<p> The home of the script </p>
<p> The home of the script </p>
</div>

JavaScript on the realization of click the button font enlargement, reduction of the relevant knowledge to introduce so much, I hope to help you!