Using JavaScript to Change Your Web Page Font Size

Using JavaScript to Change Your Web Page Font Size

In this short JavaScript tutorial, Nurani guides you how to use JavaScript in changing the web page's font size. Maybe the JavaScripts to change font size are not new things on jsB@nk, because we shared you a lot of JavaScript codes, tutorials for things such as increase font size, javascript font style, javascript text size, ... But this JavaScript tutorial is also good practice to study, let go to the full post-page for details.


Sampled by © JavaScriptBank.com

Actually, almost all browsers have a feature to control the characters on the web pages you visit, by pressing the Ctrl keytogether with + (to zoom in) or - (to zoom out). But there is one otherway of adding such a function "dynamic font size" on your site usingjavascript.

Here is a script that can be used to facilitate the visitors tocontrol the font size of text on each page of your website/blog. Thiswill be very useful for readers who struggle with small letters, andallow the person to enlarge the font size of your writing, so they areeasier to read.

<script type="text/javascript">var min=8;var max=18;function zoominLetter() {   var p = document.getElementsByTagName('p');   for(i=0;i<p.length;i++) {      if(p[i].style.fontSize) {         var s = parseInt(p[i].style.fontSize.replace("px",""));      } else {         var s = 12;      }      if(s!=max) {         s += 1;      }      p[i].style.fontSize = s+"px"   }}function zoomoutLetter() {   var p = document.getElementsByTagName('p');   for(i=0;i<p.length;i++) {      if(p[i].style.fontSize) {         var s = parseInt(p[i].style.fontSize.replace("px",""));      } else {         var s = 12;      }      if(s!=min) {         s -= 1;      }      p[i].style.fontSize = s+"px"   }}</script>

The script above will change the font size of text within theparagraph (tag <p>). If you want to use another tag, you canchange the getElementsByTagName('p');

Of course, this script only works on the page with pixel sized fonts (letter-sized pixels (px)) compared with relative sized fonts(the relative size of the letters like: "em" and "%"). In addition, ifthe script does not find the font size of a paragraph, it will use thestandard size, which is 12px.

How To Use :

Enter the above script on your blog page (either by typing in the tag <head>or by using .js file external and import). To call the functionzoominLetter and zoomoutLetter you can use the following HTML code:

<a href="javascript:zoominLetter();">A</a><a href="javascript:zoomoutLetter();">a</a>

tips: You can change the text A | a with other signs, or replace it with a picture by using tags <img>.

Source: http://www.situsinformasiinternet.com/2010/01/controlling-font-size-blogwebsite-with-javascript.html

Language
Translate this page to English Translate this page to French Translate this page to Vietnamese

Recent articles
20 Best of Beautiful Social Media Icons Sets - p6
Cart66 WordPress eCommerce
The Benefits and Limitations of Reverse Phone Directories
50+ Indispensable JavaScript, jQuery codes for Web Developers
JavaScript Slider Website Showcases
Modules and Namespaces in JavaScript
Eight Awesome JavaScript Applications with Powerful WebGL
Implementing An SEO Reseller Plan without Fear
Professional Logo Design Agency
JavaScript Classical Inheritance


Top view articles
Top 10 Beautiful Christmas Countdown Timers
65 Free JavaScript Photo Gallery Solutions
Using JavaScript to Change Your Web Page Font Size
Top 50 Most Addictive and Popular Facebook mini games
Top 10 Best JavaScript eBooks that Beginners should Learn
50+ Beautiful Resources of HTML Form using CSS and JavaScript
Javascript Countdown Timer redirecting For Your Affiliate Links
Best Free Linux Web Programming Editors
HTML5 Web Workers Multithreading in JavaScript
Top 10 Free Web Chat box Plug-ins and Add-ons


Free JavaScript Tutorials & Articles
at www.JavaScriptBank.com
<center>Trang này sử dụng FRAME nhưng trình duyệt bạn không hỗ trợ. Bạn có thể xem trực tiếp thông qua liên kết <a href="http://www.javascriptbank.com/javascript/article/Using_JavaScript_to_Change_Your_Web_Page_Font_Size.php">http://www.javascriptbank.com/javascript/article/Using_JavaScript_to_Change_Your_Web_Page_Font_Size.php</a> </center>