HTML DOM Style fontWeight Property
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"> w3wiki </h1> <h2>HTML DOM Style fontWeight Property </h2> <br> <button type="button" onclick="myBeginner()"> Change the Style </button> <script> function myBeginner() { // 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"> w3wiki </h1> <h2>HTML DOM Style fontWeight Property </h2> <br> <button type="button" onclick="myBeginner()"> Change the Style </button> <script> function myBeginner() { // 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"> w3wiki </h1> <h2>HTML DOM Style fontWeight Property </h2> <br> <button type="button" onclick="myBeginner()"> Change the Style </button> <script> function myBeginner() { // 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
Contact Us