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.
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.
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:
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.
This assumes that the element has "demo" as its id. For example, it was
written as "<p id="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.
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:
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.
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/.
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.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Change Font Sizes with JavaScript
