How to Change Fontsize by JavaScript

How to change FontSize By JavaScript?

JavaScript is case sensitive.

So, if you want to change the font size, you have to go:

span.style.fontSize = "25px";

How change font-size via javascript

You use the same property name that you would in CSS (minus the hypen and with camel casing) against the style object. Now, font-size is an "inherited" property, which means that when it is applied, the value is also applied to descendant elements as well. So, while can apply this to each <a> element if you like, you don't need to. You can just apply it to the parent element of them. Keep in mind though that ALL descendant elements will be affected in that case and you would have to then reset the font on elements that you didn't want affected.

document.querySelector("button").addEventListener("click", function(){

  var iw = window.innerWidth;

  

  document.getElementById("outputArea").textContent = "The usable width of the page is: " + iw + "px";

  if(iw > 400){

  

    // Get all the <a> elements that are children of the div

    var a = document.querySelectorAll("#leftcol > a");

  

    // loop through the colleciton of them and change their font size

    for(var i = 0; i < a.length; i++){

      a[i].style.fontSize = "3em"; 

    }

    

    // We could avoid getting all the <a> elements and looping through them one by one

    // and just do this:

    //   document.getElementById("leftcol").style.fontSize = "3em";

    // And that would affect the the elements within the #leftcol element.

  

  }

});

<div id="outputArea"></div>

<div id="leftcol">

  <a href="">1</a><br>

  <a href="">2</a><br>

  <a href="">3</a><br>

  <a href="">4</a><br>

  <a href="">5</a><br>

  <a href="">6</a><br>

</div>

<button>Click Me</button>

Change font size of element with JS

What you need is to inform the type of unit the font-size should use, for example "px": element.style.fontSize = i + "px";

Also i == i++ is not doing what you think it is, it is working since i++ will increase the i, but you don't need that comparision check ==, you just need i++; that is the same of i += 1;

See working example below:

let i = 0;

var myvar = setInterval(IconWeeder, 250);

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

element.style.fontSize = i + "px";

function bring_er_down() {

  clearInterval(myvar);

  console.log("we stopping")

}

function IconWeeder() {

  element.style.fontSize = i + "px";

  i++;

  console.clear()

  console.log("i is equal to:", i)

  console.log(element)

}

<p id="myDIV">I should change size</p>

<input type="button" value="stop" onclick="bring_er_down()" />

Increase the font size with a click of a button using only JavaScript

Change your function to as in the code below and see what happens:

function increaseFontSizeBy100px() {
    txt = document.getElementById('a');
    style = window.getComputedStyle(txt, null).getPropertyValue('font-size');
    currentSize = parseFloat(style);
    txt.style.fontSize = (currentSize + 100) + 'px';
}
function increaseFontSizeBy1px() {
    txt = document.getElementById('b');
    style = window.getComputedStyle(txt, null).getPropertyValue('font-size');
    currentSize = parseFloat(style);
    txt.style.fontSize = (currentSize + 1) + 'px';
}

Note: as you can see, there are a lot of duplication in both functions. Therefore, if I were you, I would change this function to increase the fontsize by a given value(in this case, an int).

So, what we can do about it? I think we should turn these functions into a more generic one.

Take a look at the code below:

function increaseFontSize(id, increaseFactor){
     txt = document.getElementById(id);
     style = window.getComputedStyle(txt, null).getPropertyValue('font-size');
     currentSize = parseFloat(style);
     txt.style.fontSize = (currentSize + increaseFactor) + 'px';
}

Now, for example, in your button "Increase Font Size 1px", you should put something like:

<input type="button" value="Increase Font Size 1px" onclick="increaseFontSize("b", 1)">
<p id="b">Font Size by 1 Pixel</p>

But, if we want a "Decrease Font Size 1px", what we can do? We call the function with -1 rather than with 1.

<input type="button" value="Decrease Font Size 1px" onclick="increaseFontSize("b", -1)">
<p id="b">Font Size by -1 Pixel</p>

We solve the Decrease Font Size problem as well. However, I would change the function name to a more generic one and call it in both two functions that I would create: increaseFontSize(id, increaseFactor) and decreaseFontSize(id, decreaseFactor).

That's it.

How to change font-size on innerHTML

$("#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>

Changing fontSize for a class using Javascript

getElementsByClassName() method returns a collection of elements. You should loop through them and set the necessary font value for each element individually.

How to change font size h1 - h6 with button using javascript?

This kind of thing is already provided for in the CSS specifications, it is the relative units.
here you have to use em unit, --> all font- sizes will be relative to their parent

doc : https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

sample code:

function set_font_size_big(test)
  {
  document.querySelectorAll('.main_container').forEach( el =>
    el.classList.toggle('big',test))
  }

.main_container      { font-size  : 16px;  }
.main_container.big  { font-size  : 18px;  }

.main_container > h1 { font-size: 1.95em; }
.main_container > h2 { font-size: 1.56em; }
.main_container > h3 { font-size: 1.25em; }
.main_container > h4 { font-size: 1em;    }
.main_container > h5 { font-size: 0.8em;  }
.main_container > h6 { font-size: 0.64em; }

<button onclick="set_font_size_big(false)"> normal (16px) </button>
<button onclick="set_font_size_big(true)"> big (18px) </button>

<div class="main_container">
  <h1>Almost before we knew it, we had left the ground.</h1>
  <h2>Almost before we knew it, we had left the ground.</h2>
  <h3>Almost before we knew it, we had left the ground.</h3>
  <h4>Almost before we knew it, we had left the ground.</h4>
  <h5>Almost before we knew it, we had left the ground.</h5>
  <h6>Almost before we knew it, we had left the ground.</h6>
  <p>Almost before we knew it, we had left the ground.</p>
</div>

---

Related Topics