How to change font-weight of a text using JavaScript ?
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
Please Login to comment...