The fontWeight style property in HTML DOM is used to set or return the thickness of characters in a word that should appear.
Syntax:
- It returns the fontWeight property.
object.style.fontWeight
- It sets the fontWeight Property.
object.style.fontWeight = "normal | lighter | bold | bolder | value | initial | inherit"
Property Values:
| Value | Description |
|---|---|
| normal | Default value of font |
| lighter | Lighter than normal |
| bold | Bolder than normal |
| bolder | Bolder than bold |
| value | Define from 100 to 900 where 400 is normal value |
| initial | Set to its default |
| inherit | Inherit property from parent element |
Return value: It returns the boldness of the font of the string.
Example 1:
html
<!DOCTYPE html><html>
<head>
<title>HTML DOM Style fontWeight Property </title>
</head>
<body style="text-align: center;">
<h1 style="color: green; font-weight: bold;"
id="GFG">
GeeksforGeeks
</h1>
<h2>HTML DOM Style fontWeight Property </h2>
<br>
<button type="button" onclick="myGeeks()">
Change the Style
</button>
<script>
function myGeeks() {
// Set property for "h1" tag form
// 'bold' to 'lighter'
document.getElementById("GFG")
.style.fontWeight = "lighter";
}
</script>
</body>
</html>
|
Output:
Example 2:
html
<!DOCTYPE html><html>
<head>
<title>HTML DOM Style fontWeight Property </title>
</head>
<body style="text-align: center;">
<h1 style="color: green; font-weight: lighter;"
id="GFG">
GeeksforGeeks
</h1>
<h2>HTML DOM Style fontWeight Property </h2>
<br>
<button type="button" onclick="myGeeks()">
Change the Style
</button>
<script>
function myGeeks() {
// Set property for "h1" tag form
// 'lighter' to 'bold'
document.getElementById("GFG")
.style.fontWeight = "bold";
}
</script>
</body>
</html>
|
Output:
Example 3:
html
<!DOCTYPE html><html>
<head>
<title>HTML DOM Style fontWeight Property </title>
</head>
<body style="text-align: center;">
<h1 style="color: green; font-weight: lighter;"
id="GFG">
GeeksforGeeks
</h1>
<h2>HTML DOM Style fontWeight Property </h2>
<br>
<button type="button" onclick="myGeeks()">
Change the Style
</button>
<script>
function myGeeks() {
// Set property for "h1" tag form
// 'lighter' to 1000
document.getElementById("GFG")
.style.fontWeight = "1000";
}
</script>
</body>
</html>
|
Output:
Supported Browsers: The browser supported by HTML DOM Style fontWeight Property are listed below:
- Google Chrome 2 and above
- Edge 12 and above
- Firefox 1 and above
- Opera 3.5 and above
- Safari 1 and above