Font resize of all child elements in a div

Question

I have a parent element which contains several children elements. And I want to make it so that users can increase or decrease the font size of all child elements by clicking the buttons.

Here, the children elements and their initial font sizes are stored in the array.

My current code looks like what follows:

const content = document.querySelectorAll('.content *');
let font_size = [];
for (let i = 0; i < content.length; i++) {
  const style = getComputedStyle(content[i]);
  font_size[i] = parseInt(style.fontSize);
}

const btns = document.querySelectorAll('.btn');
btns.forEach(function(btn) {
  btn.addEventListener('click', function(e) {
    const styles = e.currentTarget.classList;
    if (styles.contains('decrease')) {
      for (let i = 0; i < font_size.length; i++) {
        font_size[i] -= 2;
      }
    } else {
      for (let i = 0; i < font_size.length; i++) {
        font_size[i] += 2;
      }
    }
  });
});

<div class="content">
  <h1>Font Resize</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At id, possimus modi laboriosam corrupti quidem officia voluptas magnam ea ex?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus laborum culpa, ipsam sequi necessitatibus quas.</p>
  <blockquote>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum, ex.</blockquote>
</div>

<div class="btn-grp">
  <a href="#" class="btn decrease">Decrease</a>
  <a href="#" class="btn increase">Increase</a>
</div>

The font sizes after clicking the buttons are stored in the array and I don't know how to reassign them.

Answer 1

This is slightly opinionated. It's a button, use a <button>. To make this slightly more flexible we can store the increment/decrement in the button and then just use it - so now we have a bit more flexibility without changes to code.

Debatable if you really need the fontSizes array to store these, but let's go with that. Alternate might be to store in on a data attribute right ON the element for example to avoid fragility of content add/remove via script etc. or just calculate it again each time. So we will use your array since you have that.

Not a fan of underscores in variable names so; my answer does not follow that convention.

Note: this might be setup using a relative size on the parent em rather than all the children thus only one thing to target the changes on; but that is not part of the question, however consider that.

function changeSizeAndStore(index, fontSize) {
  fontSizes[index] = fontSize;
  content[index].style.fontSize = fontSizes[index] + 'px';
}
const content = document.querySelectorAll('.content *');
let fontSizes = [content.length];
for (let i = 0; i < content.length; i++) {
  const fontSize = window.getComputedStyle(content[i], null).getPropertyValue('font-size');
  fontSizes[i] = parseFloat(fontSize);;
}

const btns = document.querySelectorAll('.btn');
btns.forEach(function(btn) {
  btn.addEventListener('click', function(e) {
    const sizeChange = parseFloat(e.currentTarget.dataset.changeBy);
    for (let i = 0; i < content.length; i++) {
      let fontSize = fontSizes[i] + sizeChange;
      changeSizeAndStore(i, fontSize);
    }
  });
});

<div class="content">
  <h1>Font Resize</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At id, possimus modi laboriosam corrupti quidem officia voluptas magnam ea ex?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus laborum culpa, ipsam sequi necessitatibus quas.</p>
  <blockquote>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum, ex.</blockquote>
</div>

<div class="btn-grp">
  <button class="btn" data-change-by="-2.5">Decrease 2.5</button>
  <button class="btn" data-change-by="-2">Decrease 2</a>
  <button class="btn" data-change-by="2">Increase 2</a>
  <button class="btn" data-change-by="4">Increase 4</a>
</div>

Answer 2

Storing the queried DOM element and assigning the fontSize to the element's style would solve your use case.

const content = document.querySelectorAll('.content *');
let font_size = [];
for (let i = 0; i < content.length; i++){
    const elem = content[i];
    const style = getComputedStyle(elem);
    font_size[i] = {elem, size: parseInt(style.fontSize)};
}

const btns = document.querySelectorAll('.btn');
btns.forEach(function (btn) {
    btn.addEventListener('click', function (e) {
        const styles = e.currentTarget.classList;
        if (styles.contains('decrease') ) {
            for (let i = 0; i < font_size.length; i++){
                font_size[i].size -= 2;
                font_size[i].elem.style.fontSize = font_size[i].size + 'px';
            }
        } else{
            for (let i = 0; i < font_size.length; i++){
                font_size[i].size +=  2;
                font_size[i].elem.style.fontSize = font_size[i].size + 'px';
            }
        }
    });
});

<div class="content">
        <h1>Font Resize</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At id, possimus modi laboriosam corrupti quidem officia voluptas magnam ea ex?</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus laborum culpa, ipsam sequi necessitatibus quas.</p>
        <blockquote>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolorum, ex.</blockquote>
    </div>

    <div class="btn-grp">
        <a href="#" class="btn decrease">Decrease</a>
        <a href="#" class="btn increase">Increase</a>
    </div>