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">
        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>