Necesito cambiar dinámicamente el relleno css. Entonces, cada décimo número, quiero aumentar el relleno. Aquí está mi código
var padding = 200 Object.keys(MassAddressDict).forEach(function(key) { console.log(key + " " + MassAddressDict[key]); var recieverData = MassAddressDict[key] var senderInfo = combineSenderInfo(); var receiverInfo = combineReceiverInfo(recieverData); var index = Object.keys(MassAddressDict).indexOf(key); if (index % 10 === 0){ padding = padding + 20 console.log("Padding increased to ", padding) } printWindow.document.write('<div style="display:flex;justify-content:space-between">'); printWindow.document.write(senderInfo); printWindow.document.write('</div>'); printWindow.document.write(receiverInfo); printWindow.document.write("<p style='padding-bottom: 200px'></p>") });lo que quiero hacer es en cada décimo elemento del diccionario, aumentar el relleno en, digamos, 20 px. ¿Cómo puedo implementar esto?
Prueba esto, creo que esto resolverá tu problema.
var padding = 200; Object.keys(MassAddressDict).forEach(function(key) { console.log(key + " " + MassAddressDict[key]); var recieverData = MassAddressDict[key] var senderInfo = combineSenderInfo(); var receiverInfo = combineReceiverInfo(recieverData); var index = Object.keys(MassAddressDict).indexOf(key); if (index % 10 === 0){ padding = padding + 20 console.log("Padding increased to ", padding) } printWindow.document.write('<div style="display:flex;justify-content:space-between">'); printWindow.document.write(senderInfo); printWindow.document.write('</div>'); printWindow.document.write(receiverInfo); printWindow.document.write(`<p style='padding-bottom: ${padding}px'></p>`) });Primero, deberá sacar el relleno de su forEach, ahora se está restableciendo a 200 para cada nuevo objeto.
Luego simplemente agregue su relleno en su estilo (puede agregar fácilmente una variable en una cadena en javascript usando acentos graves y colocando su var dentro de ${} `This is your var => ${myVar}` ).
Tu código debería verse así:
var padding = 200 Object.keys(MassAddressDict).forEach(function(key, index) { console.log(key + " " + MassAddressDict[key]); var recieverData = MassAddressDict[key] var senderInfo = combineSenderInfo(); var receiverInfo = combineReceiverInfo(recieverData); if (index % 10 === 0){ padding = padding + 20 console.log("Padding increased to ", padding) } printWindow.document.write('<div style="display:flex;justify-content:space-between">'); printWindow.document.write(senderInfo); printWindow.document.write('</div>'); printWindow.document.write(receiverInfo); printWindow.document.write(`<p style='padding-bottom: ${padding}px'></p>`) });aquí hay alguna forma del estilo CSS dinámico
1 var div = document.getElementById('div1'); // Clear Value div.setAttribute('style',''); // OR div.removeAttribute('style'); // Set Style / Append Style 2 div.style.backgroundColor = '#ff0000'; 3 document.getElementById('#div1').style += "padding-top:40px"; 4 $("#div1").css("property",'value'); 5 Var Value=25; <div id='div1' style='padding: ${Value}px'></div>debe leer esto para una referencia completa https://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript