How to change font-weight of a text using JavaScript ?
Last Updated :
25 Dec, 2020
In this article, we will set the font-weight of a text dynamically using JavaScript. Ti change the font weight dynamically, we use HTML DOM Style fontWeight property.
Syntax:
object.style.fontWeight = "value"
Property Values:
- normal: The font weight is the default value.
- lighter: The font weight is the lighter than normal.
- bold: The font weight is bolder than normal.
- bolder: The font weight is bolder than bold.
- value: It defines from 100 to 900 where 400 is normal value.
- initial: It sets to its default font weight.
- inherit: It inherits this property from its parent element.
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< title >
How to change font-weight of
a text using JavaScript?
</ title >
</ head >
< body style = "text-align: center;" >
< h1 style = "color: green" >
GeeksforGeeks
</ h1 >
< h2 >
How to change font-weight of
< br >a text using JavaScript?
</ h2 >
< p id = "sudo" >Welcome to GeeksforGeeks</ p >
< br >
< button type = "button" onclick = "myGeeks()" >
Click to change
</ button >
< script >
function myGeeks() {
document.getElementById("sudo")
.style.fontWeight = "bold";
}
</ script >
</ body >
</ html >
|
Output:
Before Click the Button:
After Click the Button:
Supported Browsers:
- Google Chrome
- Internet Explorer
- Mozilla Firefox
- Opera
- Safari
Share your thoughts in the comments
Please Login to comment...