如何在javascript中动态更改css样式

Question

我需要动态更改css填充。所以每十个数字，我想增加填充。这是我的代码

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>")
});

我想做的是，在字典中的每十项中，增加20像素的填充。我该如何实现？

Answer 1

试试这个，我认为这会解决你的问题

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>`)
});

Answer 2

这里有一些动态CSS样式的方法

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>

你应该阅读这篇文章以获得完整的参考https://www.w3.org/wiki/Dynamic_style_-_manipulating_CSS_with_JavaScript

Answer 3

最简单的方法是使用CSS而不是JS。在这种情况下，您需要使用：nth-child()；

在第n个子项中，您放置所需的公式，以便选择所需的元素。在这种情况下，我使用3n+1。因此，选择的元素是：

3x0+1=1；

3x1+1=4；

3x2+1=7；

3x3+1=10；

html,
body {
height: 100%;
width: 100%;
}
#container {
width: 50%;
display: flex;
flex-direction: column;
}
.item {
background-color: red;
border: 1px solid black;
padding: 0 10px
}
.item:nth-child(3n+1) {
background-color: orange;
padding: 0 20px
}

<div id="container">
<div class="item"> item1 </div>
<div class="item"> item2 </div>
<div class="item"> item3 </div>
<div class="item"> item4 </div>
<div class="item"> item5 </div>
<div class="item"> item6 </div>
<div class="item"> item7 </div>
<div class="item"> item8 </div>
<div class="item"> item9 </div>
<div class="item"> item10 </div>
</div>

Answer 4

首先需要从forEach中取出填充，现在每个新对象的填充都重置为200。

然后只需在样式中添加填充即可(您可以使用backticks在javascript中的字符串中轻松添加变量，并将var放入${}`This is your var => ${myVar}`中)。

你的代码应该是这样的：

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>`)
});