Quiero publicar en la sección de mi página con artículos en filas en forma de cuadros. Utilizo el sistema de cuadrícula de arranque para que responda. Configuré el ancho de las cajas al 100%. Y quiero que la altura sea igual al ancho. Para esto escribí un código javascript para ejecutar esta tarea:
document.addEventListener("DOMContentLoaded", function(event) { let width = document.querySelectorAll(".post-boxes .box"); width.forEach(item =>{ item.style.height = `${item.offsetWidth}px` }); });Pero el problema es que solo funciona cuando DOM se carga por primera vez, y si el tamaño de la pantalla cambia, la altura sigue siendo la misma.
Esta es mi foto de cajas:
Una solución es volver a ejecutar la función cuando se cambia el tamaño de la pantalla. Puede usar el evento de cambio de tamaño para esto. Aquí hay un ejemplo:
function box(){ let width = document.querySelectorAll(".post-boxes .box"); width.forEach(item =>{ item.style.height = `${item.offsetWidth}px` }) } document.addEventListener("DOMContentLoaded", () => box() ); window.addEventListener("resize", () => box() );El evento DOMContentLoaded se activa cuando el documento HTML inicial se ha cargado y analizado por completo, sin esperar a que las hojas de estilo, las imágenes y los submarcos terminen de cargarse.
Si desea volver a calcular la altura, agregue el controlador de eventos para onresize
window.addEventListener('resize', <your-handler>);