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:
Leave a Reply