How to change font size using JavaScript

In this article, I will tell you how to change font size using JavaScript. If we want to change font size in JavaScript, we use style property. Also we will use getElementById method for accessing element with innerHTML property.

HTML DOM

Do you know DOM? OK, I will tell you…

DOM stands for Document Object Model.

It is a standard using which we can add, delete, get or change element of HTML. Isn’t it cool!!

So, let’s first learn how we can access the element of the DOM.

There are three identifiers by which we can access elements – 1. By their tag name 2. By the Classes attached to them or 3. By the Id assigned to the

I have used Id identifier here.

The getElementById Method

To access the element using Id present in the element we use getElementById() method.

getElementById();

getElementById(): To find the element using the Id assigned to it.

We write,

var element=document.getElementById("element");

this method takes in the name of Id as a parameter that is element and returns it.

The innerHTML Property

First thing we need to do is access the element. and then we have to use this property using dot operator

can you guess why we use dot operator?

simply for assigning the value to it. right?

innerHTML: this property can be used to get or change any HTML element.

element.innerHTML="string";

The style property to change font size in JavaScript

Well, we can change font size to do so we use the style property of the element.

Let’s see, how this style property looks like…

The syntax of which is as follows:

element.style.CSSProperty = value;

This will make the font size of the text equal to 25 pixel

element.style.fontsize="25px";

Thus our entire code to change font size using JavaScript

<html>
   <body>
      <p id="element">I want change my font size</p>
      <script>
         var element=document.getElementById("element");
         console.log(element);
         // you can give any size also you can change unit also like 
         percentage, points.
         element.style.fontsize="25px";
         element.innerHTML="string";
      </script>
   </body>
</html>

You can Also Read:

Change the size of an image using JavaScript

Get JSON Data from a URL in JavaScript