CODEWITHSUNDEEP
javascript
Jakub
Jakub

Reputation: 2709

Increment a font size onclick event

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.

Upvotes: 0

Views: 575

Answers (4)

Alessio Cantarella
Alessio Cantarella

Reputation: 5201

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>

Upvotes: 2

Scott Marcus
Scott Marcus

Reputation: 65806

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>

Upvotes: 2

Paul Fitzgerald
Paul Fitzgerald

Reputation: 12129

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>

Upvotes: 1

Shubham Gupta
Shubham Gupta

Reputation: 2646

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

Upvotes: -2

Related Questions