Skip to content
Related Articles

Related Articles

HTML | DOM Style fontSize Property
  • Last Updated : 01 Aug, 2019
GeeksforGeeks - Summer Carnival Banner

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:



ValueDescription
xx-small
x-small
small
medium
large
x-large
xx-large
Predefine sizes of font
smallerDecreases by one relative unit of the font-size
largerIncreases by one relative unit of the font-size
lengthFont-size in length unit
%% of the parent element’s font size
initialSet default value
inheritInherit property from its parent value

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

Example-1: Change font size into small.




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




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




<!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 ‘%’




<!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
  • Internet Explorer
  • Mozilla firefox
  • Opera
  • Safari

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :