How to Change Font Sizes with JavaScript

Modifying the Font Size of a Web Page Using JavaScript


How to Change Font Sizes with JavaScript

by Christopher Heng, thesitewizard.com

I was asked by a visitor how he could change the font size of a web page using JavaScript. This article shows you one way of doing it.

Prerequisites

Since this question is explicitly about how to do something in JavaScript, I will assume that you have at least a smattering of knowledge about that programming language, or, at the very least, know how to insert JavaScript code into your web page.

You also need some basic knowledge of HTML and CSS.

Changing the Font Size with the Style Property

There are many ways of changing the font size of an element. We will use the simple and direct method of modifying the style property.

Let's say that you want to change the font size of an element assigned to a variable "x". The JavaScript code for this is essentially:

x.style.fontSize = "150% ;

Replace "150%" with the actual font size that you want. Be sure to include the units as well. For example, if you want the text to be 2em, use "2em" instead of "150%". Likewise, if you want the size to be 12 points, specify "12pt". Include the quotation marks.

Changes to the style property are regarded as modifications to the inline style of an element. That is, it's as though you set a style="font-size: 150%;" attribute on that HTML tag. As such, it will supersede more general styles that you define in the style sheet.

The example below assumes that you want to change the font size of a specific paragraph. First, do as you normally would if you were only using CSS, by giving that element an identifier, that is, an id. Then change the style.fontSize of that element.

demo_paragraph = document.getElementById( 'demo' );
demo_paragraph.style.fontSize = "150%" ;

This assumes that the element has "demo" as its id. For example, it was written as "<p id="demo">".

Demo

If you want to test the above code, click the button below to change the size of the words in this paragraph.

I have coded it so that the button works like a toggle. That is, if you click it a second time, the font will be restored to its original size.

Source Code for the Demo

You can ignore this section. If you only want to use JavaScript to change font sizes, you have all the information you need in the earlier paragraphs. My demo includes extra code to make the button change the font back and forth between two sizes. If you don't need such functionality, feel free to skip the rest of this article, since that feature adds extra lines to the code that will unnecessarily confuse those new to JavaScript.

Anyway, for the curious, the JavaScript for the above is as follows:

var tsw_demo_font_is_large = false ;
function tsw_demo_change_font_size( )
{
  demo_paragraph = document.getElementById( 'demo' );
  if (!tsw_demo_font_is_large) {
    demo_paragraph.style.fontSize = "150%" ;
    tsw_demo_font_is_large = true ;
  }
  else {
    demo_paragraph.style.fontSize = "100%" ;
    tsw_demo_font_is_large = false ;
  }
}

The paragraph to change is given an id of "demo" to match. That is, it is specified as <p id="demo">. The code for the button merely includes an onclick attribute to invoke the JavaScript function defined earlier.

<button type="button" onclick="tsw_demo_change_font_size();">Change font size</button>

Since I wanted the button to switch the font back and forth between two sizes, I had to keep track of the current size. This is done using the tsw_demo_font_is_large variable, which is set to false when the page is loaded. It is then updated accordingly each time the button is clicked. (There are, of course, other ways of doing this, but this method is hopefully simple to understand.)

Note that you do not have to follow my example of making the button a toggle. If you want the change to go only in one direction, one solution is to hide the button after it is pressed (the way the hamburger button generated by the Navigation Menu Wizard works; see the demo if you're interested).

Copyright © 2019-2024 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

How to Link to This Page

It will appear on your page as:

How to Change Font Sizes with JavaScript





Home
Donate
Contact
Link to Us
No Spam Policy
Privacy Policy
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.