Techumber

Change The Font Size On Fly using JavaScript

Github avatar
Dimpu
January 10, 2013. 3 min read

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 ametundefined consectetur adipisicing elitundefined sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamundefined
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
proidentundefined sunt in culpa qui officia deserunt mollit anim id est laborum.
<br />
<br />
Lorem ipsum dolor sit ametundefined consectetur adipisicing elitundefined sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamundefined
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
proidentundefined 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')undefined
btnD=document.getElementById('btnD')undefined
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(txtundefinednull).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


...