Skip to content
Related Articles

Related Articles

HTML | DOM Style fontWeight Property

Improve Article
Save Article
  • Last Updated : 07 Jun, 2022
Improve Article
Save Article

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

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!