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