How to increase font-size of all divs of a certain class
Question
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 class="txt" . 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 getElement ById ('txt') with getElement sByClassName ('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 class="zoombox"> <button class="btn zoom out">-</button> <div class="txt"> ZOOM </div> <button class="btn zoom in">+</button> </div> <details open> <summary>TITLE OF THE SONG</summary> <div class="txt chords"> Em FD# </div> <div class="txt lyrics">A song with its lyrics</div> </details>
6 answers
solution1
1 2022-03-25 17:49:13
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 class="zoombox"> <button id="zoomOut" class="btn zoom out">-</button> <div class="txt"> ZOOM </div> <button id="zoomIn" class="btn zoom in">+</button> </div> <div class="txt titles">TITLE OF THE SONG</div> <div class="txt chords"> Em FD# </div> <div class="txt lyrics">A song with its lyrics</div> </body>
solution2
1 ACCPTED 2022-03-25 17:55:12
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, summary").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 class="zoombox"> <button class="btn zoom out">-</button> <div class="txt"> ZOOM </div> <button class="btn zoom in">+</button> </div> <details open> <summary>TITLE OF THE SONG</summary> <div class="txt chords"> Em FD# </div> <div class="txt lyrics">A song with its lyrics</div> </details>
solution3
1 2022-03-25 17:58:31
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
solution4
1 2022-03-25 18:05:10
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 class="zoombox"> <button class="btn zoom-out">-</button> <div class="txt"> ZOOM </div> <button class="btn zoom-in">+</button> </div> <div class="txt titles">TITLE OF THE SONG</div> <div class="txt chords"> Em FD# </div> <div class="txt lyrics">A song with its lyrics</div>
And you can write a zoom-out function based on the zoom_in function.
solution5
0 2022-03-25 17:49:02
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>
solution6
0 2022-03-25 18:06:14
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 class="zoombox"> <button class="btn zoom out">-</button> <div class="txt"> ZOOM </div> <button class="btn zoom in">+</button> </div> <details open> <summary>TITLE OF THE SONG</summary> <div class="txt chords"> Em FD# </div> <div class="txt lyrics">A song with its lyrics</div> </details>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.