Open In App
Related Articles

HTML | DOM Style fontSize Property

Improve Article
Improve
Save Article
Save
Like Article
Like

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>


Output:

  • Before click on button

 

  • After click on button

 

Supported Browsers: The browser supported by HTML | DOM Style fontSize Property are listed below:

  • Google Chrome 1
  • Edge 12
  • Internet Explorer 5.5
  • Mozilla firefox 1
  • Opera 7
  • Safari 1

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 08 Aug, 2022
Like Article
Save Article
Previous
Next
Similar Reads
Complete Tutorials