Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to change the font size of a text using JavaScript?
In this tutorial, programmers will learn to change the font size of text using JavaScript. Many applications allow users to change the font size according to their requirements. We need to change the default font size using JavaScript to achieve that.
Before we move ahead with the tutorial, let's learn what values we can assign to the font size.
Different Values for Font Size
We can assign the below values to the font size of any element. Every value changes the font size differently:
xx-large | x-large | large | medium | small | x-small | xx-small ? Fixed font sizes from smallest to largest.
smaller ? Decreases the font size by one relative unit.
larger ? Increases the font size by one relative unit.
initial ? Sets the font size to default value (medium).
% ? Sets font size as percentage of parent element's font size. For example, if parent is 100px and child is set to 50%, child becomes 50px.
inherit ? Sets font size same as parent element's font size.
Syntax
let element = document.getElementById("element_id");
element.style.fontSize = "xx-large";
Example: Changing Font Size to Fixed Value
In this example, we access a div element and change its font size when the button is clicked:
<html>
<head>
<style>
button {
height: 30px;
width: 130px;
}
</style>
</head>
<body>
<h2>Change the font size using JavaScript.</h2>
<div>Click the button to change the font size using <i>font-size property of style attribute.</i></div>
<div id="fonts">Hello World!</div>
<button onclick="changeFontsize()">Change Font Size</button>
<script>
// function to change the font size of div
function changeFontsize() {
let fontsDiv = document.getElementById("fonts");
fontsDiv.style.fontSize = 'xx-large'; // change font size to xx-large
}
</script>
</body>
</html>
In the above example, clicking the button changes the font size of "Hello World!" text to xx-large.
Example: Using inherit Value
This example demonstrates using the 'inherit' value to match the parent element's font size:
<html>
<head>
<style>
button {
height: 30px;
width: 130px;
}
</style>
</head>
<body>
<h2>Change the font size using JavaScript.</h2>
<div style="font-size: 50px;">Click the button to change the font size <i>according to parent element's font size.</i>
<div id="fonts" style="font-size:20px;">Hello World!</div>
<button onclick="changeFontsize()">Change Font Size</button>
</div>
<script>
function changeFontsize() {
let fontsDiv = document.getElementById("fonts");
fontsDiv.style.fontSize = 'inherit'; // inherit parent's font size
}
</script>
</body>
</html>
Initially, the parent div has 50px font size and the child div has 20px. When you click the button, the child div inherits the parent's 50px font size.
Common Use Cases
Font size manipulation is useful for:
- Accessibility features (text size adjustment)
- Responsive design adaptations
- User preference settings
- Dynamic content styling
Conclusion
JavaScript provides flexible ways to change font sizes dynamically using the style.fontSize property. You can use fixed values like 'xx-large', relative values like 'inherit', or percentage values based on your needs.
8K+ Views
