Quiero proporcionar a los usuarios de mi página web una forma sencilla de aumentar y disminuir el tamaño del texto de todos los elementos que pertenecen a class="txt" . Los dos botones en el fragmento a continuación deberían disminuir/aumentar el tamaño de fuente en 4 puntos cada vez que se hace clic en ellos (también sería suficiente un control deslizante).
Investigué mucho y probé diferentes métodos ( 1 , 2 , 3 ) pero no pude hacer que ninguno de ellos funcionara. Estas soluciones actúan sobre la id de los elementos, así que traté de reemplazar getElement ById ('txt') con getElement sByClassName ('txt') ; aún nada.
.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>En primer lugar, debe formatear su código html . Le sugiero que tenga sus clases html formateadas como el código que se proporciona a continuación.
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> Y puede escribir una función de alejamiento basada en la función zoom_in .
Podrías hacer algo como esto. Estaría configurando un detector de eventos en el cuerpo, pero haga clic en la burbuja de eventos para que el detector de eventos único capture los clics en cualquier elemento secundario.
Este enfoque evita que los botones de zoom también se escalen.
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>Puede usar getComputedStyle para obtener el tamaño de fuente actual (como una cadena con una unidad de medida). Entonces sugeriría multiplicar este número con un coeficiente y luego agregarle la misma unidad nuevamente. Este coeficiente podría ser 1,1 o 0,9 para un aumento o disminución del 10%.
Aquí está su HTML con esa solución agregada:
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>