HTML | DOM Style fontSize Property

The fontSize property is used to set or get the font size of characters in a word should appear.

Syntax:

It returns the fontSize property.

object.style.fontSize

It sets the fontSize Property.

object.style.fontSize = "value|initial|inherit"

Property Values:

Value	Description
xx-small x-small small medium large x-large xx-large	Predefine sizes of font
smaller	Decreases by one relative unit of the font-size
larger	Increases by one relative unit of the font-size
length	Font-size in length unit
%	% of the parent element’s font size
initial	Set default value
inherit	Inherit property from its parent value

Return value: It returns the font size of the text of element.

Example-1: Change font size into small.

html

<!DOCTYPE html>

<html>
 
<head>

    <title>DOM Style fontSize Property </title>

</head>
 
<body>

    <center>

        <p style="color: green;

                  width: 100%;

                  font-size: 30px; 

                  font-weight: bold;" 

           id="Geek1">

            GeeksForGeeks

        </p>
 
        <h2>DOM Style fontSize Property </h2>

        <br>

        <button type="button" onclick="myGeeks()">

            Click to change

        </button>
 
        <script>

            function myGeeks() {

                //  Change font size in to small.

                document.getElementById(

               "Geek1").style.fontSize = "small";

            }

        </script>

    </center>

</body>
 
</html>

Output:

Before click on button:

After click on button:

Example-2: Change font-size into xx-large.

html

<!DOCTYPE html>

<html>
 
<head>

    <title>DOM Style fontSize Property </title>

</head>
 
<body>

    <center>

        <p style="color: green; 

                  width: 100%; 

                  font-size: 10px; 

                  font-weight: bold;" 

           id="Geek1">

            GeeksForGeeks

        </p>
 
        <h2>DOM Style fontSize Property </h2>

        <br>

        <button type="button" onclick="myGeeks()">

            Click to change

        </button>
 
        <script>

            function myGeeks() {

                //  change into xx-large.

                document.getElementById(

                  "Geek1").style.fontSize = "xx-large";

            }

        </script>

    </center>

</body>
 
</html>

Output:

Before click on button:

After click on button:

Example-3: Change font-size using length unit.

html

<!DOCTYPE html>

<html>
 
<head>

    <title>DOM Style fontSize Property </title>

</head>
 
<body>

    <center>

        <p style="color: green;

                  width: 100%;

                  font-size: 10px; 

                  font-weight: bold;"

           id="Geek1">

            GeeksForGeeks

        </p>
 
        <h2>DOM Style fontSize Property </h2>

        <br>

        <button type="button" onclick="myGeeks()">

            Click to change

        </button>
 
        <script>

            function myGeeks() {

                //  Change font size from 

                //  from 10px to 30px

                document.getElementById(

                  "Geek1").style.fontSize = "30px";

            }

        </script>

    </center>

</body>
 
</html>

Output:

Before click on button:

After click on button:

Example-4: Change font-size using ‘%’

html

<!DOCTYPE html>

<html>
 
<head>

    <title>DOM Style fontSize Property </title>

</head>
 
<body>

    <center>

        <p style="color: green;

                  width: 100%; 

                  font-size: 10px; 

                  font-weight: bold;"

           id="Geek1">

            GeeksForGeeks

        </p>
 
        <h2>DOM Style fontSize Property </h2>

        <br>

        <button type="button" onclick="myGeeks()">

            Click to change

        </button>
 
        <script>

            function myGeeks() {

                //  Change font-size from 100% to 200%

                document.getElementById(

                  "Geek1").style.fontSize = "200%";

            }

        </script>

    </center>

</body>
 
</html>