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

Answer 2

永远不要使用.onclick（）或用户脚本中的类似属性！（在常规网页上也很糟糕。）

原因是用户脚本在沙箱中运行（＆＃34;隔离的世界＆＃34;），并且onclick在目标页面范围内运行，无法看到脚本创建的任何函数。

相反，请使用事件。 HTML现在具有更容易绑定的id，但不再具有onclick（）

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

JS现在将事件绑定到HTML元素并执行函数绑定到操作。在这种情况下，该功能是您自己的，操作是单击。

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

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

}

document.getElementById ("copyButton").addEventListener ("click", copia, false);

实际问题已经解释过了，但我认为从长远来看，这对改进代码非常重要。

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

2 个答案: