Allow users to change font size of a webpage using JavaScript - GeeksforGeeks

19 Aug, 2021
If you have seen some websites especially some Indian government portals, you would have noticed three small buttons at the top rightmost corner of the page looking something like this: -A  A  A+. These buttons generally allow the website users to change the font size of the entire page or a certain portion of the page to a specific size to improve the readability of the page. In this post, we are going to learn how to achieve this feature for a specific div using JavaScript. However, usage of the buttons provides users only a few options to change the font size. Using an HTML slider allows users to choose a font size from within a wide range thus giving users more options to choose from. So, apart from buttons, we are also going to achieve the same feature using an HTML slider.
Approach:
Define the <div> tag consisting the <p> tag, slider & 3 buttons.Make a JavaScript function to change the font size of the content in the div section. Use OnClick() event for the button click & for moving the slider, use OnChange() event.In the case of a button click, use the DOM to access the <div> tag for changing the value of the font-size attribute from javascript itself.  In the case of moving the slider, again use DOM to access the value of the slider that has been set by the user and use this value as the font-size value for the <div> tag.
Define the <div> tag consisting the <p> tag, slider & 3 buttons.
Make a JavaScript function to change the font size of the content in the div section. Use OnClick() event for the button click & for moving the slider, use OnChange() event.
In the case of a button click, use the DOM to access the <div> tag for changing the value of the font-size attribute from javascript itself.  
In the case of moving the slider, again use DOM to access the value of the slider that has been set by the user and use this value as the font-size value for the <div> tag.
We will follow the above approach to build the font size controller & will make it stepwise manner.
Step 1: Create a simple HTML page with three buttons, a div consisting of a paragraph, and a slider. We are going to change the font size of this div content using the buttons or the slider. We will apply only the essential CSS stylings.
 
HTML
<!DOCTYPE html><html>  <body>    <center>        <h1 style="color: green">GeeksForGeeks</h1>        <button type="button" name="btn1">-A</button>        <button type="button" name="btn2">A</button>        <button type="button" name="btn3">A+</button>        <br /><br />        <div style="padding: 20px; margin: 50px;            font-size: 20px; border: 5px solid green;"            id="container" class="container">                          <p>                A Computer Science portal for geeks.                 It contains well written, well thought                 and well explained computer ming science                 and programarticles,quizzes and practice/                 competitive programming/company interview                 questions.            </p>        </div>          <input type="range" min="10" max="30"                     id="slider" value="20" />    </center></body>  </html>
Step 2: We will write a JavaScript function to change the font size of the div when the user clicks the button or moves the slider. This change can be observed by using JavaScript events. Make use of the onClick() event to observe if the user has clicked the button and make use of the onChange() event to sense if the user has moved the slider. Create two functions for the two triggers events (ie. onClick and onChange). 
For the button functionality, a parametrized function will be created for the onClick event where each button will send a unique number which will be the font size of the div. Using the Document object module (DOM), we can access our <div> tag and change the value of the font-size attribute from javascript itself.
For the Slider functionality, a normal non-parameterized function will be created for the onChange event. Using the Document object module (DOM), we can access the value of the slider that has been set by the user and use this value as the font-size value for our <div> tag.
Javascript
<script>   var cont = document.getElementById("container");   function changeSizeByBtn(size) {          // Set value of the parameter as fontSize     cont.style.fontSize = size;   }   function changeSizeBySlider() {     var slider = document.getElementById("slider");            // Set slider value as fontSize     cont.style.fontSize = slider.value;   }</script>
Step 3: Add the appropriate functions to the event attributes of the button and the slider. Click the buttons or move the slider and you should see the font size of the div contents to be changing.
Complete code:
HTML
<!DOCTYPE html><html>  <body>    <center>        <h1 style="color: green">GeeksForGeeks</h1>        <button type="button"             onclick="changeSizeByBtn(15)" name="btn1">            -A        </button>                  <button type="button"             onclick="changeSizeByBtn(20)" name="btn2">            A        </button>          <button type="button" onclick="changeSizeByBtn(25)"            name="btn3">            A+        </button>        <br /><br />          <div style="padding: 20px; margin: 50px;            font-size: 20px; border: 5px solid green;"             id="container" class="container">                          <p>                A Computer Science portal for geeks.                 It contains well written, well thought                 and well explained computer scienc and                 programming articles quizzes and practice/                 competitive programming/company interview                 questions.            </p>        </div>          <input type="range" min="10" max="30" id="slider"            onchange="changeSizeBySlider()" value="20" />    </center>      <script>        var cont = document.getElementById("container");          function changeSizeByBtn(size) {              // Set value of the parameter as fontSize            cont.style.fontSize = size;        }          function changeSizeBySlider() {            var slider = document.getElementById("slider");              // Set slider value as fontSize            cont.style.fontSize = slider.value;        }    </script></body>  </html>
Output:
changing font size using JavaScript
HTML-Questions
HTML-Tags
JavaScript-Questions
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Design a web page using HTML and CSS
Form validation using jQuery
How to set space between the flexbox ?
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Hide or show elements in HTML using display property
How to Insert Form Data into Database using PHP ?
REST API (Introduction)