How to change font size using JavaScript

In this article, I will tell you how to change font size using JavaScript. To change font size in JavaScript, we will use the style property. Also, we will use the getElementById method to access the elements.

 

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 elements 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 element.

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 span = document.getElementById("span");

This method will target the id of the span tag.

The style property to change font size in JavaScript

Well,  we can change the 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

<body>
    <span id="span">CODESPEEDY</span>

    <script>
        var span = document.getElementById("span");
        console.log(span);
        span.style.fontSize = "50px";
     </script>
</body>

 

You can Also Read:

Change the size of an image using JavaScript

Get JSON Data from a URL in JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *