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
JavaScript: How to allow users to change the font-size of a webpage?
In this article, we will explore how to create a dynamic font size control feature that allows users to adjust the font size of webpage content. This accessibility feature is commonly found on government websites and helps users customize text size for better readability.
We'll implement this functionality using both vanilla JavaScript and jQuery approaches to give you flexibility in your implementation.
Method 1: Using jQuery
This example demonstrates a simple implementation with increase and decrease buttons that modify the font size of specific content areas.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Change Font Size with jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.font-controls {
text-align: center;
margin: 20px;
}
.font-controls button {
padding: 10px 15px;
margin: 5px;
font-size: 14px;
cursor: pointer;
}
.content {
padding: 20px;
margin: 20px auto;
max-width: 800px;
font-size: 16px;
border: 2px solid #ccc;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="font-controls">
<h1>Dynamic Font Size Control</h1>
<button type="button" value="increase" class="increaseFont">
Increase Font ++
</button>
<button type="button" value="decrease" class="decreaseFont">
Decrease Font --
</button>
<button type="button" class="resetFont">
Reset Font
</button>
</div>
<div class="content" id="textContainer">
<h2>Sample Content</h2>
<p>This is a sample paragraph that demonstrates the dynamic font sizing feature. Users can increase or decrease the font size using the buttons above to improve readability according to their preferences.</p>
<p>This accessibility feature is particularly useful for users with visual impairments or those who prefer larger text for comfortable reading.</p>
</div>
<script type="text/javascript">
$(document).ready(function(){
const originalFontSize = parseInt($('.content').css('font-size'));
$(".increaseFont, .decreaseFont").click(function(){
const type = $(this).val();
const currentFontSize = parseInt($('.content').css('font-size'));
if(type === 'increase' && currentFontSize < 28){
$('.content').css('font-size', currentFontSize + 2);
} else if(type === 'decrease' && currentFontSize > 12){
$('.content').css('font-size', currentFontSize - 2);
}
});
$(".resetFont").click(function(){
$('.content').css('font-size', originalFontSize);
});
});
</script>
</body>
</html>
Method 2: Using Vanilla JavaScript
This approach uses pure JavaScript without jQuery dependency, making it lighter and more modern.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Change Font Size with JavaScript</title>
<style>
.font-controls {
text-align: center;
margin: 20px;
}
.font-controls button {
padding: 10px 15px;
margin: 5px;
font-size: 14px;
cursor: pointer;
border: 1px solid #007bff;
background-color: #007bff;
color: white;
border-radius: 4px;
}
.font-controls button:hover {
background-color: #0056b3;
}
.content {
padding: 20px;
margin: 20px auto;
max-width: 800px;
font-size: 16px;
border: 2px solid #28a745;
line-height: 1.6;
border-radius: 8px;
}
.font-size-display {
margin: 10px;
font-weight: bold;
color: #666;
}
</style>
</head>
<body>
<div class="font-controls">
<h1>JavaScript Font Size Control</h1>
<button id="increaseBtn">Increase Font ++</button>
<button id="decreaseBtn">Decrease Font --</button>
<button id="resetBtn">Reset Font</button>
<div class="font-size-display">
Current Font Size: <span id="currentSize">16px</span>
</div>
</div>
<div class="content" id="content">
<h2>Dynamic Text Sizing</h2>
<p>This example shows how to implement font size controls using vanilla JavaScript. The implementation includes bounds checking to prevent extremely small or large font sizes.</p>
<p>Features include: minimum font size of 12px, maximum font size of 28px, and a reset function to return to the original size.</p>
</div>
<script>
const content = document.getElementById('content');
const currentSizeSpan = document.getElementById('currentSize');
const originalFontSize = 16;
const minFontSize = 12;
const maxFontSize = 28;
function updateFontSize(newSize) {
content.style.fontSize = newSize + 'px';
currentSizeSpan.textContent = newSize + 'px';
}
function getCurrentFontSize() {
return parseInt(window.getComputedStyle(content).fontSize);
}
document.getElementById('increaseBtn').addEventListener('click', function() {
const currentSize = getCurrentFontSize();
if (currentSize < maxFontSize) {
updateFontSize(currentSize + 2);
}
});
document.getElementById('decreaseBtn').addEventListener('click', function() {
const currentSize = getCurrentFontSize();
if (currentSize > minFontSize) {
updateFontSize(currentSize - 2);
}
});
document.getElementById('resetBtn').addEventListener('click', function() {
updateFontSize(originalFontSize);
});
</script>
</body>
</html>
Key Features Explained
Bounds Checking: Both examples include minimum (12px) and maximum (28px) font size limits to prevent unusable text sizes.
Reset Functionality: Users can return to the original font size with a dedicated reset button.
Visual Feedback: The vanilla JavaScript version displays the current font size, giving users clear feedback about the current setting.
Increment Size: Font size changes by 2px increments for noticeable but gradual adjustments.
Comparison
| Method | Dependencies | File Size | Browser Support |
|---|---|---|---|
| jQuery | jQuery library required | Larger (with jQuery) | Excellent |
| Vanilla JavaScript | None | Smaller | Modern browsers |
Conclusion
Both approaches provide effective font size control functionality. Choose jQuery for projects already using it, or vanilla JavaScript for modern, lightweight implementations. Always include bounds checking and reset functionality for better user experience.
4K+ Views
