HTML | DOM Style fontSize Property - GeeksforGeeks

01 Aug, 2019
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

object.style.fontSize

It sets the fontSize Property.object.style.fontSize = "value|initial|inherit"

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

Property Values:
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
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-DOM
HTML-Property
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?