How to change FontSize By JavaScript?

Question

This code is not working

var span = document.getElementById("span");
span.style.fontsize = "25px";
span.innerHTML = "String";

Psychoactive

is it camel cased? span.style.fontSize = "25px"; – Legnica

fontsize -> fontSize It should be in camel case. – Kenn

Answer 1

JavaScript is case sensitive.

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

span.style.fontSize = "25px";

Pulmonate

Looks like it is VS2008's bug. Intellisense providing wrong, it is providing fontsize but it should provide fontSize. "s" character of word "fontSize" should be capital. – Psychoactive

In JavaScript Intellisense only works meh. It usually provides names, that have already been used so far. That is, if you have declared fontsize somewhere, you'll get fontsize listed. That has nothing to do with the .style.fontSize, however. – Antoneantonella

In CSS, though, the property is called `font-size'. Why does it have a different name to access the same property in javascript? – Pinetum

In CSS font-size is the correct name but in javascript that would trasnlate to font minus style so everywhere in the CSS you have a dash in javascript the property would be camel cased without the dash. – Outcurve

Answer 2

<span id="span">HOI</span>
<script>
   var span = document.getElementById("span");
   console.log(span);

   span.style.fontSize = "25px";
   span.innerHTML = "String";
</script>

You have two errors in your code:

1. document.getElementById - This retrieves the element with an Id that is "span", you did not specify an id on the span-element.

2. Capitals in Javascript - Also you forgot the capital of Size.

Guadalcanal

Answer 3

try this:

var span = document.getElementById("span");
span.style.fontSize = "25px";
span.innerHTML = "String";

Motherofpearl

Answer 4

Please never do this in real projects😅:

document.getElementById("span").innerHTML = "String".fontsize(25);

<span id="span"></span>

Guilford

This is so awful I couldn't just pass along without upvoting. People need to know about this, specifically, not doing this! – Carmelo

Answer 5

span.style.fontSize = "25px";

use this

Vicissitude

Answer 6

I had the same problem, this was my original HTML:

<input id = "fsize" placeholder = "Font Size" type = "number">
</input>

<button id = "apfsizeid" onclick = "apfsize()"> Apply Font Size 
</button>

<textarea id = "tarea"> Your Text 
</textarea>

And this was my original JS:

function(apfsize) {
var fsize = document.getElementById("fsize").value;
var text = document.getElementById("tarea").innerHTML;
text.style.fontsize = fsize;
document.getElementById("tarea").innerHTML = text;
}

This is my new JS, and it seems to be working just fine:

function apfsize() {
var fsize = document.getElementById("fsize").value;
fsize = Number(fsize);
document.getElementById("tarea").style.fontSize = fsize + "px";
}

So for some reason, I had to add the little "px" at the very last as a string, and somehow it worked. I hope this helps :)

Merozoite