Allow users to change font size of a webpage using JavaScript Last Updated : 26 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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 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 with 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.ApproachContainer Selection:Use document.getElementById to select the HTML element with the ID "container" and store it in the variable cont. This assumes the presence of an HTML element with the ID "container" that represents the container whose font size will be manipulated.Button Font Size Change:Define a function changeSizeByBtn(size) that takes a parameter size.Inside the function, set the fontSize property of the container (cont.style.fontSize) to the specified size. This function facilitates changing the font size based on a predefined size passed as an argument.Slider Font Size Change:Define a function changeSizeBySlider.Retrieve the slider element with the ID "slider" using document.getElementById and store it in the variable slider.Set the fontSize property of the container (cont.style.fontSize) to the current value of the slider. This function enables dynamic font size changes based on the slider's value.HTML Structure:Ensure there is an HTML element with the ID "container" that represents the container whose font size you want to change.Include a button or slider in your HTML that triggers the font size change functions.Event Handling:Attach event handlers to the button or slider element to call the respective font size change functions.For the button approach, call changeSizeByBtn with a specific size when the button is clicked.For the slider approach, call changeSizeBySlider when the slider value changes, ensuring dynamic font size adjustments.Example: In this example, we have followed the above-explained approach. HTML <!DOCTYPE html> <html> <body> <div style="text-align:center"> <h1 style="color: green">GeeksForGeeks</h1> <button type="button" name="btn1" onclick="changeSizeByBtn('-10px')">-A</button> <button type="button" name="btn2" onclick="changeSizeByBtn('10px')">A</button> <button type="button" name="btn3" onclick="changeSizeByBtn('20px')">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" onchange="changeSizeBySlider()" /> </div> <script src="script.js"></script> </body> </html> JavaScript let cont = document.getElementById("container"); function changeSizeByBtn(size) { // Set value of the parameter as fontSize cont.style.fontSize = size; } function changeSizeBySlider() { let slider = document.getElementById("slider"); // Set slider value as fontSize cont.style.fontSize = slider.value + "px"; } Output: Comment More infoAdvertise with us Next Article Allow users to change font size of a webpage using JavaScript laxmanbalaraman Follow Improve Article Tags : JavaScript Web Technologies How To JavaScript-Questions Similar Reads How to change font-weight of a text using JavaScript ? In this article, we will set the font-weight of a text dynamically using JavaScript. Ti change the font weight dynamically, we use HTML DOM Style fontWeight property. Syntax: object.style.fontWeight = "value" Property Values: normal: The font weight is the default value.lighter: The font weight is t 1 min read How to Change Font Size using drop-down List in JavaScript ? To change or set a font size for certain text, the fontSize property needs to be changed. The fontSize property sets or returns a list of fontSize names for text in an element.CSS font-size property is used to specify the font's height and size. It affects the size of an element's text. It has a med 2 min read How to set font size based on window size using JavaScript ? Given an HTML document and the task is to change the font-size based on the size of the window with the help of JavaScript. Approach 1:First convert the document element font sizes to em or % by using a function.Call this function on every resize of the window. It will change the font size based on 1 min read JavaScript Change the Text of a Span Element Updating the text of HTML elements, such as a <span> in JavaScript allows developers to dynamically alter webpage content. This technique is used for creating interactive web features like displaying user feedback, updating real-time data, or modifying elements based on user actions. Here, we' 3 min read How to change font-weight of a canvas-type text using Fabric.js? One can change the font-weight of a canvas-type using Fabric.js which adds versatility and style to the web applications and graphic design. It provides an efficient method to manipulate text properties such as font weight dynamically, which enhances the presentation and readability of the text elem 3 min read How to change the font size of a text canvas using Fabric.js ? In this article, we are going to see how to change the font size of a text canvas using FabricJS. The text canvas means text written is movable and can be stretched according to requirement. Further, the text itself cannot be edited like a textbox. Approach: To make it possible we are going to use a 2 min read How to zoom-in and zoom-out image using JavaScript ? Zooming in and out of images using JavaScript refers to the ability to increase (zoom in) or decrease (zoom out) the size of an image interactively. This effect enhances user experience by allowing users to focus on specific image details or view the full image easily.These are the following ways:Ta 3 min read How to change font size using jQuery ? In this article, we will see how to change the font size of an element using jQuery. To change the font size of an element, we will use css() method. The css() method is used to change the style property of the selected element. Syntax: $(selector).css(property) Return value: It will return the valu 1 min read How to change font style using drop-down list in JavaScript ? To change or set a font style for certain text, the fontFamily CSS property needs to be changed. The fontFamily property sets or returns a list of font-family names for text in an element. Syntax: object.style.fontFamily = "font" To change the font style by option dropdown: The font values can be pa 2 min read How to Adjust the Width of Input Field Automatically using JavaScript? The <input> element in HTML is used to create interactive controls for forms, allowing users to input data. It is one of the most versatile elements, with various input types and attributes that make it powerful for building forms. One important attribute is the width attribute, which allows y 2 min read Like