using javascipt to change the size of a font inside the text editor

Question

I have to create in an application some content through a text editor but that editor does not have an option to change the font size.

However, the text editor allows the HTML code to insert in there.

I want to do that using JS but I'm stuck on how to find the proper way to do it.

My question is how to increase the font size of all the text inside the p element?

This is the piece of html that is already inside the text editor.

This is how the generated HTML looks in the browser

 //this is what i tried but didn't work document.getElementsByTagName("html")[0].style["font-size"] = "20px"

 <p></p> <h5><b><span><span><span><i>-8 minutes</i></span></span><span>&nbsp;read</span></span></b></h5> <p></p> <p>Here we will see some of the examples.<br><br></p> <h4><b>Example 1:</b></h4> <p></p>

Answer 1

To enlarge all paragraphs, you can do the following.

Things to note include:

1. The script element comes after the other HTML (usu. inside the body element.)
2. The getElementsByTagName selector returns all elements of the type p .
3. The for...of syntax lets us loop through the paragraphs.
4. The font-size attribute is represented as the fontSize property.

 <p></p> <h5><b><span><span><span><i>-8 minutes</i></span></span><span>&nbsp;read</span></span></b></h5> <p></p> <p>Here we will see some of the examples.<br><br></p> <h4><b>Example 1:</b></h4> <p></p> <script> let paragraphs = document.getElementsByTagName("p"); for (let p of paragraphs) { p.style.fontSize = "20px"; } </script>

BTW, a better practice would be to set a class instead of changing the style property directly, like:

p.classList.add("my-big-class");

And in your CSS (which can be in a style element inside the head element of your HTML), you define the behavior for the class, like:

.my-big-class{ font-size: 20px; } /* CSS syntax is a bit different */