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 font style using drop-down list in JavaScript?
In JavaScript, you can change the font style of text elements using a dropdown list by combining HTML select elements with the style.fontFamily property. This creates an interactive way for users to change text appearance dynamically.
A dropdown list (select element) allows users to choose from multiple font options. When a selection is made, JavaScript captures the change event and applies the selected font to target elements.
Syntax
The basic syntax for changing font family using JavaScript:
element.style.fontFamily = "fontName";
HTML select element with options:
<select onchange="changeFont(this)">
<option value="Arial">Arial</option>
<option value="Times New Roman">Times New Roman</option>
</select>
Method 1: Using Inline Event Handler
This approach uses the onchange attribute directly in the HTML select element:
<html>
<body>
<div id="content">
<h2 style="color:blue;">
Font Style Changes After Selecting the Dropdown List
</h2>
</div>
<select id="fontSelector" onchange="changeFontStyle(this);">
<option value="Times New Roman" selected="selected">
Times New Roman
</option>
<option value="Arial">Arial</option>
<option value="fantasy">Fantasy</option>
<option value="cursive">Cursive</option>
</select>
<script>
function changeFontStyle(selectElement) {
document.getElementById("content").style.fontFamily = selectElement.value;
}
</script>
</body>
</html>
Method 2: Using CSS Classes with Event Listener
This method applies predefined CSS classes based on the dropdown selection:
<html>
<head>
<style>
.arial-font {
font-family: Arial;
}
.algerian-font {
font-family: Algerian;
}
.berlin-font {
font-family: 'Berlin Sans FB';
}
.times-font {
font-family: 'Times New Roman';
}
</style>
</head>
<body>
<div>
<h3>Text Style Changes with Dropdown Selection</h3>
</div>
<div id="output-text">
Welcome to JavaScript Font Styling Tutorial!
</div>
<div>
<select id="fontDropdown">
<option value="times-font" selected>Times New Roman</option>
<option value="arial-font">Arial</option>
<option value="algerian-font">Algerian</option>
<option value="berlin-font">Berlin Sans FB</option>
</select>
</div>
<script>
document.getElementById("fontDropdown").addEventListener("change", function() {
const textElement = document.getElementById("output-text");
textElement.className = this.value;
});
</script>
</body>
</html>
Method 3: Multiple Text Elements
Change font style for multiple elements simultaneously:
<html>
<body>
<h2 class="changeable-text">Heading Text</h2>
<p class="changeable-text">This is paragraph text that will change font.</p>
<div class="changeable-text">This is div content.</div>
<select id="fontChanger">
<option value="Arial">Arial</option>
<option value="Georgia">Georgia</option>
<option value="Verdana">Verdana</option>
<option value="Comic Sans MS">Comic Sans MS</option>
</select>
<script>
document.getElementById("fontChanger").addEventListener("change", function() {
const elements = document.querySelectorAll(".changeable-text");
elements.forEach(element => {
element.style.fontFamily = this.value;
});
});
</script>
</body>
</html>
Key Features
- Dynamic Font Changes: Font styles update instantly when dropdown selection changes
- Multiple Implementation Methods: Use inline handlers, event listeners, or CSS classes
- Cross-Element Application: Apply font changes to single or multiple elements
- User-Friendly Interface: Provides intuitive way to change text appearance
Browser Compatibility
The style.fontFamily property and dropdown events are supported in all modern browsers. For older browsers, ensure font names are properly quoted and fallback fonts are provided.
Conclusion
Changing font styles with dropdown lists combines HTML select elements with JavaScript's style.fontFamily property. This technique provides users with an interactive way to customize text appearance dynamically.
6K+ Views
