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-weight of a text using JavaScript?
Using JavaScript is one of the most effective ways to dynamically change the font-weight of any text on your webpage. Font weight refers to the boldness or thinness of characters, ranging from 100 (thin) to 900 (black/heavy). In this article, we will explore how to change font-weight using JavaScript for both single and multiple elements.
Using the Style fontWeight Property
The style.fontWeight property allows us to change the font weight of individual HTML elements. This property accepts both numeric values and keyword values.
Syntax
document.getElementById("elementId").style.fontWeight = "normal|lighter|bold|bolder|100-900|initial|inherit";
You can assign numeric values (100-900) or keywords like "normal", "bold", "bolder", or "lighter" to the fontWeight property.
Font Weight Values
| Keyword | Numeric Equivalent | Description |
|---|---|---|
| normal | 400 | Default font weight |
| bold | 700 | Bold text |
| lighter | Relative | Lighter than parent |
| bolder | Relative | Bolder than parent |
Example: Using Numeric Values
<html>
<body>
<h2 id="myHeading">Change Font Weight Example</h2>
<button onclick="changeWeight()">Make Text Lighter (300)</button>
<script>
function changeWeight() {
const heading = document.getElementById("myHeading");
heading.style.fontWeight = 300;
}
</script>
</body>
</html>
This example changes the heading's font weight to 300, making it appear lighter than the default.
Example: Using Keywords
<html>
<body>
<p id="myParagraph">This text will become bolder</p>
<button onclick="makeBolder()">Make Text Bolder</button>
<script>
function makeBolder() {
const paragraph = document.getElementById("myParagraph");
paragraph.style.fontWeight = "bolder";
}
</script>
</body>
</html>
Here we use the keyword "bolder" to make the paragraph text heavier than its current weight.
Changing Font Weight of Multiple Elements
To change font weight for multiple elements simultaneously, use querySelectorAll() which returns a NodeList of matching elements.
Method 1: Using forEach()
<html>
<body>
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p>Third Paragraph</p>
<button onclick="changeAllParagraphs()">Make All Bold</button>
<script>
function changeAllParagraphs() {
const paragraphs = document.querySelectorAll("p");
paragraphs.forEach(function(paragraph) {
paragraph.style.fontWeight = "bold";
});
}
</script>
</body>
</html>
The forEach() method iterates through each paragraph element and applies the bold font weight.
Method 2: Using for...of Loop
<html>
<body>
<div class="content">
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div>
<button onclick="changeWithLoop()">Change with for...of</button>
<script>
function changeWithLoop() {
const paragraphs = document.querySelectorAll("p");
for (const paragraph of paragraphs) {
paragraph.style.fontWeight = 600;
}
}
</script>
</body>
</html>
The for...of loop provides direct access to each element without needing to use array indices.
Practical Use Cases
Common scenarios for changing font weight include:
- User Preferences: Allowing users to adjust text thickness for better readability
- Interactive Elements: Highlighting text on hover or focus
- Dynamic Content: Emphasizing important information based on user actions
- Responsive Design: Adjusting font weights for different screen sizes
Conclusion
JavaScript provides flexible methods to change font weight using the style.fontWeight property. Use getElementById() for single elements and querySelectorAll() with loops for multiple elements. Both numeric values (100-900) and keywords offer precise control over text appearance.
1K+ Views
