Entonces, con cada iteración, el div, "actividadItems" se hace más grande. Lo que estoy tratando de hacer es rastrear la altura del div y asegurarme de que no exceda la altura de la página (PDF). Según la altura del div, quiero poner un salto de página cuando exceda el límite de altura especificado. Sé que el PDF tendrá una altura de 792 px. Sin embargo, quiero poner un salto de página un poco antes de eso. De todos modos, mi pregunta es ¿cómo obtengo y hago un seguimiento de la altura del div a través de cada iteración desde una cadena HTML interna? El siguiente es un fragmento de código. Además, si hay una solución jQuery, también la aceptaré.
var html = '' var webElement = document.createElement('div'); webElement.id = 'items'; for (i=1; i< checlboxes.length; i++) { if (checkboxes[i].checked) { var OfficeName = row.cells[4].innerHTML; var Summary = row.cells[8].innerHTML; var Activities = row.cells[10].innerHTML; html += '<br/>'; html += '<div class="row"><div class="col-md-6" style="display:inline-block; font-weight:bold">' + SummaryTitle + ' FROM ' + OfficeName + ': </div></div>' html += '<div class="row"><div class="col-md-6" style="display:inline-block; text-align:justify">' + ActivityDetails + '</div></div>' html += '<br/>' webElement.innerHTML += '<div id="activityItems">' + html + '</div>'; } }Sí, definitivamente es posible realizar un seguimiento y obtener una altura div. En primer lugar, puede obtener la altura del div utilizando atributos del elemento dom como el siguiente.
Y también puede usar la función getBoundingClientRect del elemento como este.
const ele = document.getElementById("myDiv") let rect = ele.getBoundingClientRect() console.log("height: " + rect.height)Eso es todo y en términos de seguimiento, puede usar solo una especie de temporizador o hilo. puede establecer la función TimeOut en javascript.
Realice un seguimiento de las mutaciones de elementos individuales con MutationObserver . Le permite realizar un seguimiento cuando se realizan los diversos cambios en un elemento.
El siguiente código configura un observador en su div e informa la altura a medida que crece. Puede reemplazar el registro de la consola con una llamada de función que se integra en su salto de página en ese punto.
EDITAR: me di cuenta de que varios elementos representados en una lista no dispararán al observador debido a la naturaleza asíncrona del evento. Así que agregué un tiempo de espera para permitir que el observador dispare entre cada mutación. También agregué más de una casilla de verificación para mayor claridad.
Luego, puede detener al observador (con .disconnect() ) o permitir que continúe escuchando más cambios.
var html = ''; var webElement = document.getElementById('items'); var checkboxes = document.querySelectorAll('[type=checkbox]'); const observer = new MutationObserver(callback); observer.observe(webElement, { attributes: true, childList: true, subtree: true }); checkboxes.forEach(cb => { setTimeout(() => { html = ''; if (cb.checked) { var OfficeName = "office name"; var SummaryTitle = "summary"; var Activities = "acvities"; html += '<br/>'; html += '<div class="row"><div class="col-md-6" style="display:inline-block; font-weight:bold">' + SummaryTitle + ' FROM ' + OfficeName + ': </div></div>' html += '<div class="row"><div class="col-md-6" style="display:inline-block; text-align:justify">' + Activities + '</div></div>' html += '<br/>' webElement.innerHTML += '<div id="activityItems">' + html + '</div>'; } }, 0); }); function callback(mutationsList, observer) { for (const mutation of mutationsList) { if (mutation.type === 'childList') { console.log('Item div height: ', mutation.target.getBoundingClientRect().height); } } }; <input type="checkbox" checked> <input type="checkbox" checked> <div id="items"></div>