Change The Font Size On Fly using JavaScript

If your reading something on a web page, If you feel difficult to read the text because of the font size. Then most of the people use ctrl+mouse scroll to zoom the web page. But some time it is too ugly to read like that.  Some user may not know ctrl+mouse trick.
So it is wroth to add this little JavaScript which will Increase or Decrease font size of specific para easily.
Change The Font Size On Fly using JavaScript


demo

download

Sample HTML

<p><a href="#" id="btnI">Increase++</a>|  
<a id="btnD" href="#">Decrease--</a>  
</p>  
<br />  
<p id="text">  
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse  
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non  
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
<br />  
<br />  
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,  
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo  
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse  
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non  
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
<br />  
</p> 

Here we have one sample text para with id text Two links with id btnI,btnD acts like increase,decrease buttons.
JavaScript

<script type="text/javascript">  
window.onload=function(){  
var btnI=document.getElementById('btnI'),  
btnD=document.getElementById('btnD'),  
text=document.getElementById('text');  
//when Increase clicked 
btnI.onclick=function(e){  
if (e.preventDefault) {  
e.preventDefault();  
} else { 
e.returnValue = false;  
} 
var currentSize=parseInt(getSize(text));  
text.style.fontSize=currentSize+1+"px";  
} 
//when Decrease clicked 
btnD.onclick=function(e){  
if (e.preventDefault) {  
e.preventDefault();  
} else { 
e.returnValue = false;  
} 
var currentSize=parseInt(getSize(text));  
text.style.fontSize=currentSize-1+"px";  
} 
//cross browser get current font size 
function getSize(txt){  
if (txt.currentStyle) {  
return txt.currentStyle['fontSize'];  
} else if (window.getComputedStyle) { 
return document.defaultView.getComputedStyle(txt,null).getPropertyValue('font-size');  
} else { 
alert("Sorry your browser does not support");  
} 
} 
}; 
</script> 

When  user click on Increase or Decrease link then we first get the current font size using getSize function. I getSize for cross browser support. If clicked on increase then we will update font size by 1 or if it is decrease then will update it by -1. We are attaching buttons to onclick events.
That's it! hope you like it :D

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.