How to change FontSize By JavaScript?

Question

This code is not working

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

Solution 1

JavaScript is case sensitive.

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

span.style.fontSize = "25px";

Solution 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.

Solution 3

try this:

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

Solution 4

Please never do this in real projects😅:

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

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

View more solutions

Comments

[Seth]

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

[jams]

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.

[Elliot]

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

[Harry Chilinguerian]

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.

[Emile Bergeron]

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