How to change font-size on innerHTML

Question

Can I change font-size by javascript like use innerHTML or something else ?

<iframe frameborder="0" src="javascript:'<html></html>';" id="iframe1" title="" style="width: 100%;height: 416px;margin: 0px;padding: 0px;">
<!DOCTYPE html>
<html>
<head>
<style></style>
</head>
<body style="font-size:12px;"> HELLO WORLD </body></html>
</iframe>

It means when iframe load or focus, the font-size must change.

Possible duplicate of [How to change FontSize By JavaScript?](https://stackoverflow.com/questions/5586703/how-to-change-fontsize-by-javascript) — Alok Mali, Sep 20 '19 at 05:25

score 0 · Answer 1 · answered Sep 20 '19 at 05:25

0

You can add some JavaScript to change the font size.

document.body.style.fontSize = '15px'

answered Sep 20 '19 at 05:25

GeorgeButter

2,521
1
29
47

score 0 · Answer 2 · answered Sep 20 '19 at 05:30

0

visite w3schools.com where you can get more details with examples

document.body.style.fontSize="20px";

answered Sep 20 '19 at 05:30

Prakash Karena

2,525
1
7
16

score 0 · Answer 3 · answered Sep 20 '19 at 05:51

You can use getElementsByTagName for add style for body.

document.getElementsByTagName("body")[0].style.fontSize = "20px";

document.getElementsByTagName("body")[0].style.fontSize = "20px";

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style></style>
</head>
<body style="font-size:12px;"> HELLO WORLD </body></html>

score 0 · Answer 4 · answered Sep 20 '19 at 06:05

This is the code that will convert your all text into desired font-size.

document.onreadystatechange = function () {
    if (document.readyState == "complete") {
     var your-str = document.getElementsByTagName("body")[0];
     var obj-store-style-property = your-str.fontsize(12);
     document.getElementsByTagName("body").innerHTML = obj-store-style-property;
   }
  }

score 0 · Accepted Answer · answered Sep 20 '19 at 06:35

$("#iframe1").contents().find("body").css('font-size','20px');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<iframe frameborder="0" src="javascript:'<html></html>';" id="iframe1" title="" style="width: 100%;height: 416px;margin: 0px;padding: 0px;">
<!DOCTYPE html>
<html>
<head>
</head>
<body style="font-size:12px;"> HELLO WORLD  </body></html>
</iframe>

score -1 · Answer 6 · answered Sep 20 '19 at 05:24

-1

Try:

document.body.style.fontSize="12px";

answered Sep 20 '19 at 05:24

Ritesh Khandekar

3,885
3
15
30

How to change font-size on innerHTML

6 Answers6