How to increase font-size of all divs of a certain class-CodePudding

I want to provide the users of my webpage a simple way to increase and decrease the text size of all the elements which belong to . The two buttons in the snippet below should decrease / increase the font-size by 4pt every time they are clicked (a slider would also suffice).

I've done a lot of research and tried different methods (1, 2, 3) but I wasn't able to make any of them work. These solutions act on the id of the elements, so I tried to replace getElementById('txt') with getElementsByClassName('txt'); still nothing.

.txt {
  font-size: 14pt;
}

summary {
  font-size: 20pt;
}

/* STYLE */ .txt, summary { font-family: monospace; white-space: pre-wrap; }
/* STYLE */ .zoombox { display: flex; padding: 8pt 0pt; }

<div >
  <button >-</button>
  <div > ZOOM </div>
  <button > </button>
</div>

<details open>
  <summary>TITLE OF THE SONG</summary>
  <div >  Em   F        D#    </div>
  <div >A song with its lyrics</div>
</details>

CodePudding user response：

Step over the array

getElementById('txt') will return a single element; getElementsByClassName('txt') will return an array. You would need to step through the elements and change the font size.

Here's a working sample: https://jsbin.com/mozobik/edit?html,output

CodePudding user response：

You could do something like this. You would be setting an event listener on the body, but click events bubble so that single event listener will catch clicks on any children.

This approach prevents the zoom buttons from also scaling.

let zoomIn = document.getElementById('zoomIn');
let zoomOut = document.getElementById('zoomOut');
let textArray = Array.from(document.getElementsByClassName('txt'));

document.querySelector('body').addEventListener('click', zoom);

function zoom(e) {
  textArray.forEach(txt => {
    let currentSize = parseFloat(window.getComputedStyle(txt).fontSize);
    if(e.target.classList.contains('in')) {
        txt.style.fontSize = (currentSize   1)   'px';
    }
    else {
        txt.style.fontSize = (currentSize - 1)   'px';
    }
  })
}

.txt {
  font-size: 14pt;
}

summary {
  font-size: 20pt;
}

/* STYLE */ .txt, summary { font-family: monospace; white-space: pre-wrap; }
/* STYLE */ .zoombox { display: flex; padding: 8pt 0pt; }

<body>
  <div >
    <button id="zoomOut" >-</button>
    <div > ZOOM </div>
    <button id="zoomIn" > </button>
  </div>

  <div >TITLE OF THE SONG</div>
  <div >  Em   F        D#    </div>
  <div >A song with its lyrics</div>
</body>

CodePudding user response：

You can use getComputedStyle to get the current font-size (as a string with a unit of measure). Then I would suggest to multiply this number with a coefficient and then append the same unit again to it. This coefficient could be 1.1 or 0.9 for a 10% increase or decrease.

Here is your HTML with that solution added:

document.querySelector("button.in").addEventListener("click", () => zoom(1.1));
document.querySelector("button.out").addEventListener("click", () => zoom(0.9));

function zoom(coeff) {
    document.querySelectorAll(".txt").forEach(el => {
        let css = getComputedStyle(el).getPropertyValue("font-size");
        let size = parseFloat(css);
        let unit = css.replace(/[\d.-]*/, "");
        el.style.fontSize = size * coeff   unit;
    });
}

summary { font-size: 20pt }
.txt { font-family: monospace; white-space: pre-wrap; font-size: 14pt }
.zoombox { display: flex; padding: 8pt 0pt }

<div >
  <button >-</button>
  <div > ZOOM </div>
  <button > </button>
</div>

<details open>
  <summary>TITLE OF THE SONG</summary>
  <div >  Em   F        D#    </div>
  <div >A song with its lyrics</div>
</details>

CodePudding user response：

this example can help you to find your answer read this code carefully special javascript part:

    function iWChangeEveryThing(){
      const fontSize = document.getElementById("numberr").value;
      const prag = document.getElementById("prag").style;
      prag.fontSize = fontSize   "px"
    }

    body{
      text-align: center;
    }
    button{
      font-size: 30px;
      padding: 30px;
    }

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <input type="number" id="numberr">
    <p id="prag">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, veritatis. Quaerat nam eos aspernatur nisi deserunt enim. Quam corrupti asperiores cupiditate recusandae aliquid at nisi quisquam quidem. Unde, dolor esse.</p>
    <button onclick="iWChangeEveryThing()">click me</button>
  </body>
</html>

CodePudding user response：

First of all, you should format your html code. I suggest you to have your html classes formatted like the code given below.

const val = document.querySelectorAll(".txt");
const zoomin = document.querySelector(".zoom-in");
const zoomout = document.querySelector(".zoom-out");

function zoom_in() {
  val.forEach((element) => {
    const fonsi = window
      .getComputedStyle(element, null)
      .getPropertyValue("font-size");
    const currentSize = parseFloat(fonsi);
    element.style.fontSize = currentSize   1   "px";
  });
}

zoomin.addEventListener("click", () => {
  zoom_in();
});

<div >
    <button >-</button>
    <div > ZOOM </div>
    <button > </button>
</div>
      
<div >TITLE OF THE SONG</div>
<div >  Em   F        D#    </div>
<div >A song with its lyrics</div>

And you can write a zoom-out function based on the zoom_in function.

CodePudding user response：

This is how I'll implement it and also I use px instead pt

const zoomOut = document.querySelector(".zoom__out");
const zoomIn = document.querySelector(".zoom__in");
const texts = document.querySelectorAll(".txt");

// whatever size you want as default
let curFontSize = 14;

zoomOut.addEventListener("click", function () {
  curFontSize -= 4;
  texts.forEach((el) => {
    el.style.fontSize = `${curFontSize}px`;
  });
});

zoomIn.addEventListener("click", function () {
  curFontSize  = 4;
  texts.forEach((el) => {
    el.style.fontSize = `${curFontSize}px`;
  });
});

<div >
  <button >-</button>
  <div > ZOOM </div>
  <button > </button>
</div>

<details open>
  <summary>TITLE OF THE SONG</summary>
  <div >  Em   F        D#    </div>
  <div >A song with its lyrics</div>
</details>