Increment a font size onclick event

Question

In the new JS, I would like to understand how to make a simple increase of a font size of a text. My goal is to onclick the text and sees increasing.

I tried something like that without success:

function increaseFontSize(objId) {
    obj = document.getElementById(objId);
    //get current font size of obj
    currentSize = parseFloat(obj.style.fontSize); //parseFloat gives you just the numerical value, i.e. strips the 'em' bit away
    obj.style.fontSize = (currentSize + .1) + "em";
}

I would like to see a demo with the new JS like the querySelector or else to solve this simple issue to allow me to learn the correct way.

Possible duplicate of [How To Get Font Size in HTML](https://stackoverflow.com/questions/15195209/how-to-get-font-size-in-html) — Siddharth Pal, Oct 14 '19 at 10:07

Alessio Cantarella · Answer 1 · 2019-10-14T11:33:15.003

2

Get the font-size of your element (with getComputedStyle function), increase it, then assign it to the element again:

document.getElementById('myText').addEventListener("click", function () {
  let fontSize = parseInt(window.getComputedStyle(this, null).getPropertyValue('font-size'));
  fontSize++;
  this.style.fontSize = fontSize + 'px';
});

<div id="myText">My text</div>

edited Oct 14 '19 at 11:33

answered Oct 14 '19 at 10:05

Alessio Cantarella

5,077
3
27
34

`getComputedStyle()` doesn't need `getPropertyValue()` Both are methods by the way and should be written with `()` after them. Also, when there is no psudeo-class, the second argument can be omitted instead of passing `null`. – Scott Marcus Oct 14 '19 at 10:30

Scott Marcus · Answer 2 · 2019-10-14T10:54:25.237

The style property of an element only returns style information that has been set on the style attribute in the HTML. If the style has been set via a class or through JavaScript, you will get undefined. Instead, use getComputedStyle(), which will return the current style information, regardless of how it was set.

Also, you probably don't want to increase the font size with:

currentSize + .1 + "em"

Since em is a unit that is relative to the size of the parent element. If say, an element has parent element with a font size of 16px (the default size of normal text in most browsers) and you strip off the px and then add .1em to it, you'll have a new size of 16.1em, which means 16.1 times the parent element size (16 x 16.1 = 257.6px). If you really want to use em, you should just make it 1.1 for a slight size increase, otherwise stick with px and just bump it up by 1 (shown below).

// Instead of the function only being able to work when an element
// id is passed to it, have the function work as long as an element
// reference itself is passed to it. This is more flexible, since
// not all elements will have an id.
function increaseFontSize(element) {
  console.clear();
  currentSize = parseFloat(getComputedStyle(element).fontSize); 
  console.log("Original size of: " + element.nodeName + ": " + currentSize);
  element.style.fontSize = ++currentSize + "px"; // Bump up the font size by 1 and concatenate "px" to the result
  console.log("New size of: " + element.nodeName + ": " + getComputedStyle(element).fontSize);
}

// Set a click event on the entire document
document.addEventListener("click", function(event){
  // Run the callback and pass a reference to the actual element that was clicked
  increaseFontSize(event.target);
});

<p>A long time ago</p>
<div>In a galaxy far far away</div>
<h1><div>STAR WARS</div></h1>

That interesting but how to see onclick showed in the HTML the font is increasing? Clicking on the text thefont is not increasing as I see. — Jakub, Oct 14 '19 at 10:14

Paul Fitzgerald · Accepted Answer · 2019-10-14T10:28:49.863

1

You want to do something like the following.

const p = document.querySelector('p');
p.addEventListener("click", updateFontSize);

function updateFontSize() {
  const style = window.getComputedStyle(p, null).getPropertyValue('font-size');
  const fontSize = parseFloat(style);
  p.style.fontSize = (fontSize + 10) + 'px';
}

<p>Test</p>

edited Oct 14 '19 at 10:28

answered Oct 14 '19 at 10:04

Paul Fitzgerald

11,770
4
42
54

Nice example but trying this on JSfiddles is giving me this error `Uncaught ReferenceError: updateFontSize is not defined at HTMLParagraphElement.onclick` ? – Jakub Oct 14 '19 at 10:18
ah yeah, that is because you need to update the js load type on js fiddle - https://jsfiddle.net/xv0u4z3p/ If you look here you will see it works. Play around with the load type in the dropdown in the js section. – Paul Fitzgerald Oct 14 '19 at 10:24

score -2 · Answer 4 · answered Oct 14 '19 at 10:08

-2

Here is a code-sandbox demo. We are getting fontSize from computed styles and then incrementing. https://codesandbox.io/s/pedantic-platform-4zndi

answered Oct 14 '19 at 10:08

Shubham Gupta

2,596
1
8
19

First, code only answers are not good answers on Stack Overflow. Please read [How to Answer](https://stackoverflow.com/help/how-to-answer). Second, there's no need to post your code at a 3rd party site. Those links can die over time, making your answer meaningless. Just post your code into a code snippet, right here in your answer. – Scott Marcus Oct 14 '19 at 10:10

Increment a font size onclick event

4 Answers4