Open In App

HTML DOM Style fontWeight Property

Improve
Improve
Like Article
Like
Save
Share
Report

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:

fontWeight

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:

fontWeight2

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:

fontWeight2

 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


Last Updated : 22 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads