Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to change the font-weight of a text using JavaScript?
Using JavaScript is one of the most famous ways to change the font-weight of any text on your webpage. We can build interactive applications using JavaScript with HTML elements. Font weight refers to the boldness or thinness of the characters. In this article, we will see how we can change the font-weight of a text using JavaScript.
Using the Style fontWeight Property
Let us see how can we change the font weight of a single element, such as a paragraph or a heading. To do this, we will use the ‘style.fontWeight’ property of the element. This property is an object which contains all the CSS properties and their corresponding values.
Syntax
We can use the following syntax to change the font weight of a text−
document.getElementById("myId").style.fontWeight = "normal|lighter|bold|bolder|value|initial|inherit"
Here we can assign “normal”, “lighter”, “bold”, “bolder” or the number value between 100 and 900 to the fontWeight property.
Hence we can assign a value to the fontWeight property in two ways, i.e., numbers and keywords.
Example: Assigning Number to fontWeight property
To change the font weight of an HTML element by using this method, then number should set between 100 and 900. Let us see an example for changing the font weight of a heading element using a number.
<html>
<body>
<h2 id="myHeading">Change Font Weight of HTML Element in JavaScript</h2>
<button onclick="myfuction()">Click to change font weight to 300</button>
<script>
function myfuction(){
const heading = document.getElementById("myHeading");
heading.style.fontWeight = 300;
}
</script>
</body>
</html>
As we see in the example, here we used the getElementById method to select the heading element with the ID “myHeading”, and then set the font-weight property of the object to 300, which we will make the text of the heading element lighter than normal.
Example: Assigning Keywords to fontWeight property
To change the font weight of an HTML element by using this method, then we can use the normal, bold or bolder. Setting the font-weight to normal corresponds to setting the font-weight to 400, and setting the font-weight to bold corresponds to setting the font-weight to 700.
<html>
<body>
<div id="myDiv">
<p id="myParagraph">
Change Font Weight of HTML Element using
keywords Method
</p>
</div>
<button onclick="myfuction()">Click to change font weight to bolder</button>
<script>
function myfuction(){
const paragraph = document.getElementById("myParagraph");
paragraph.style.fontWeight = "bolder";
}
</script>
</body>
</html>
As we see in the example, here we used the here we used the getElementById method to select the paragraph element with the ID “myParagraph”, and then set the font-weight property of the object to “bolder”, which we will make the text of the paragraph element even bolder than before it is.
Changing the font-weight of a multiple element
Suppose if you want to change the font-weight of a multiple elements at once, like all the paragraphs in a document, then we can use the ‘querySelectorAll’ method. And it returns a node list of all the HTML elements which matches a given CSS selector.
Example: Using the forEach Method
Let us see an example, to change the font-weight of all the elements of paragraph in a document using the forEach method.
<html>
<body>
<div id="myDiv">
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div>
<button onclick="myfuction()">Click to change font weight</button>
<script>
function myfuction() {
const paragraphs = document.querySelectorAll("p");
paragraphs.forEach(function(paragraph) {
paragraph.style.fontWeight = 700;
});
}
</script>
</body>
</html>
In the above example, we used the “querySelectorAll” to select all the elements of paragraphs in the HMTL document. Then, we use the forEach method of the node list to iterate over all the paragraphs and set their font weight to 700.
The 'forEach' method is a useful way to iterate over a node list. It allows us to perform a function on each element in the list. In this case, we are setting the 'fontWeight' property of the style object to 700 for each paragraph element.
Example: Using the for-of loop method
Let us see an another example, to change the font-weight of multiple elements in a document using the for-of loop method. The for-of loop is a traditional method or another way to iterate over a node list.
<html>
<body>
<h3>Example of Font-Weight Text Changing for-of method</h3>
<div id="myDiv">
<p>First Paragraph </p>
<p>Second Paragraph</p>
</div>
<button onclick="myfuction()">Click to change font weight</button>
<script>
function myfuction() {
const paragraphs = document.querySelectorAll("p");
for (const paragraph of paragraphs) {
paragraph.style.fontWeight = 700;
}
}
</script>
</body>
</html>
In this example, we iterate over the paragraphs using 'for-of' loops and set their font weight to 700. The difference between for loop and for-of loop is that, for-of loop allows us to directly access the element of the node list, whereas in for loop, we access its index.
Conclusion
In this article, we have successfully demonstrated how can we change the font-weight of a text along with examples. Here, we seen different examples to change the font-weight of both, single element and multiple elements using the JavaScript. For multiple elements, we written two different examples using the forEach method, and for-of method.
772 Views
