通过className选择e复制样式...我的错误在哪里？

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()">

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

Answer 1

parA[i].style.backgroundColor;将从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">