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

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

HTML DOM Style fontWeight Property

Explore