javascript - Select by className e copying a style...我的错误在哪里？

Question

我对这段代码感到疯狂:

function copia() {
  var parA = document.getElementsByClassName("A");
  var parB = document.getElementsByClassName("B");

  for (i = 0; i < parA.length; i++) {
    parB[i].style.backgroundColor = parA[i].style.backgroundColor;
  }
}

.A {
  background-color: #FFFFC2;
}

.B {
  background-color: #ccffff;
}

<p class="B">ONE</p>
<p class="A">TWO</p>
<p class="B">THREE</p>
<p class="A">FOUR</p>
<input type="button" value="CLICCA" onclick="copia()">

理论上，单击按钮应该将 A 类所有元素的背景色复制到 B 类的相应元素中(假设两者具有相同数量的元素)。但它不起作用。

Answer 1

parA[i].style.backgroundColor; 将从样式属性中获取背景颜色。要获取实际值，您需要执行以下操作:

var style = window.getComputedStyle(parA[i]),
parB[i].style.backgroundColor = style.getPropertyValue('background-color');

代码示例

document.getElementById('btn').addEventListener('click', function () {

    var parA = document.getElementsByClassName("A");
    var parB = document.getElementsByClassName("B");
    
    for (i = 0; i < parA.length; i++) {
    	 var style = window.getComputedStyle(parA[i]);
       parB[i].style.backgroundColor = style.getPropertyValue('background-color');
    }
    
});

.A {
    background-color: #FFFFC2;
}

.B {
     background-color: #ccffff;
}

<p class="B">ONE</p>
<p class="A">TWO</p>
<p class="B">THREE</p>
<p class="A">FOUR</p>
<input id="btn" type="button" value="CLICCA">