HTML | DOM Style fontWeight Property
The fontWeight property is used to set or return how thick or thin characters in a word 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: Return the boldness of the font of the string.
Example-1:
html
<!DOCTYPE html><html><head> <title>DOM Style fontWeight Property </title></head><body> <center> <!-- Property for p tag. --> <p style="color: green; width: 100%; font-size: 30px; font-weight: bold;" id="sudo"> GeeksForGeeks </p> <h2>DOM Style fontWeight Property </h2> <br> <button type="button" onclick="myGeeks()"> Click to change </button> <script> function myGeeks() { // Set property for "p" tag form // 'bold' to 'lighter'. document.getElementById( "sudo").style.fontWeight = "lighter"; } </script> </center></body></html> |
Output:
- Before click on button:
- After click on button:
Example-2:
html
<!DOCTYPE html><html><head> <title>DOM Style fontWeight Property </title></head><body> <center> <p style="color: green; width: 100%; font-size: 30px;" id="sudo"> GeeksForGeeks </p> <h2>DOM Style fontWeight Property </h2> <br> <button type="button" onclick="myGeeks()"> Click to change </button> <script> function myGeeks() { // Set property from normal to bold. document.getElementById( "sudo").style.fontWeight = "bold"; } </script> </center></body></html> |
Output:
- Before click on button:
- After click on button:
Example-3:
html
<!DOCTYPE html><html><head> <title>DOM Style fontWeight Property </title></head><body> <center> <p style="color: green; width: 100%; font-size: 30px;" id="sudo"> GeeksForGeeks </p> <h2>DOM Style fontWeight Property </h2> <br> <button type="button" onclick="myGeeks()"> Click to change </button> <script> function myGeeks() { // Set property bolder. document.getElementById( "sudo").style.fontWeight = "bolder"; } </script> </center></body></html> |
Output:
- Before click on button:
- After click on button:
Example-4:
html
<!DOCTYPE html><html><head> <title>DOM Style fontWeight Property </title></head><body> <center> <p style="color: green; width: 100%; font-size: 30px;" id="sudo"> GeeksForGeeks </p> <h2>DOM Style fontWeight Property </h2> <br> <button type="button" onclick="myGeeks()"> Click to change </button> <script> function myGeeks() { // Set font using values. document.getElementById( "sudo").style.fontWeight = "1000"; } </script> </center></body></html> |
Output:
- Before click on button:
- After click on button:
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
- Internet Explorer 3 and above
- Opera 3.5 and above
- Safari 1 and above
Please Login to comment...