Tengo un elemento principal que contiene varios elementos secundarios. Y quiero hacerlo para que los usuarios puedan aumentar o disminuir el tamaño de fuente de todos los elementos secundarios haciendo clic en los botones.
Aquí, los elementos secundarios y sus tamaños de fuente iniciales se almacenan en la matriz.
Mi código actual se parece a lo siguiente:
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>Los tamaños de fuente después de hacer clic en los botones se almacenan en la matriz y no sé cómo reasignarlos.
Esto es un poco opinable. Es un botón, usa un <button> . Para hacer esto un poco más flexible, podemos almacenar el incremento/decremento en el botón y luego simplemente usarlo, por lo que ahora tenemos un poco más de flexibilidad sin cambios en el código.
Es discutible si realmente necesita la matriz fontSizes para almacenarlos, pero sigamos con eso. La alternativa podría ser almacenar en un atributo de datos directamente EN el elemento, por ejemplo, para evitar la fragilidad de agregar/eliminar contenido a través de un script, etc. o simplemente calcularlo nuevamente cada vez. Entonces usaremos su matriz ya que la tiene.
No soy fanático de los guiones bajos en los nombres de las variables, así que; mi respuesta no sigue esa convención.
Nota: esto podría configurarse usando un tamaño relativo en el elemento principal em lugar de todos los elementos secundarios, por lo tanto, solo una cosa para orientar los cambios; pero eso no es parte de la pregunta, sin embargo, considere eso.
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>Almacenar el elemento DOM consultado y asignar el tamaño de fontSize al estilo del elemento resolvería su caso de uso.
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>