Skip to content
Related Articles

Related Articles

HTML | DOM Style fontWeight Property
  • Last Updated : 01 Aug, 2019

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:



ValueDescription
normalDefault value of font
lighterLighter than normal
boldBolder than normal
bolderBolder than bold
valueDefine from 100 to 900 where 400 is normal value
initialSet to its default
inheritInherit property from parent element

Return value: Return the boldness of the font of the string.

Example-1:




<!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:




<!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:




<!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:




<!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
  • Internet Explorer
  • Mozilla Firefox
  • Opera
  • Safari
My Personal Notes arrow_drop_up
Recommended Articles
Page :