我试图获取background-color元素的计算样式（span）。这是我的HTML，基本上是两个label元素，其中包含input和span元素：
<label>
<input type="radio" name="numbers" value="01" checked/>
<span id="first-span">01</span>
</label>
<label>
<input type="radio" name="numbers" value="02" />
<span>02</span>
</label>
在选中相应的background-color时更改span的{{1}}的简单CSS：
input JavaScript，我在click事件上调用函数input:checked + span {
background-color: rgba(0, 0, 0, 0.1);
}
，负责在控制台中打印第一个handleClick元素的计算background-color：
span即使我在var span = document.getElementById('first-span');
function handleClick(e) {
e.preventDefault();
var computedStyle = window.getComputedStyle(span, null);
console.log(computedStyle.backgroundColor);
}
var numbers = document.getElementsByName('numbers');
for (var i = 0; i < numbers.length; i++) {
numbers[i].addEventListener('click', handleClick, false);
}
功能中呼叫e.preventDefault()（因此已检查的输入不会发生变化），我也会获得不同的handleClick值。如果点击第一个background-color，我会得到正确的值：input。但是，如果点击了第二个rgba(0, 0, 0, 0.1)，则会得到错误的input值。
我找到的解决方法是将代码放在transparent内，例如：
setTimeout这很有效，但我真的不喜欢它。所以问题是：
您可以在不使用
function handleClick(e) { e.preventDefault(); setTimeout(function(){ var computedStyle = window.getComputedStyle(span, null); console.log(computedStyle.backgroundColor); }, 0); }的情况下提供解决方案吗？关于为什么会发生这种情况的解释也很好，但实际上并不需要：）
检查演示：
答案 0 :(得分：2)
如果在调用.preventDefault()时设置断点，则可视单选按钮已更改为选择了第二个输入并应用了CSS更改。然后它会在您的代码执行后更改回来。
如果您.preventDefault发生了click事件，但在getComputedStyle()事件期间检查了mouseup，那么它会按预期运行。
编辑：
默认操作应在事件发送完成后执行，但在特殊情况下可能也会在调度事件之前立即执行。
与＆lt; input type =＆＃34;复选框＆＃34;＆gt;上的点击事件相关联的默认操作元素切换该元素的已检查IDL属性值。如果取消了click事件的默认操作，则该值将恢复到以前的状态。
所以似乎浏览器可以通过以下方式实现控件：默认操作首先发生，然后调用click处理程序，然后浏览器＆＃34;阻止默认＆＃34 34;通过撤消它已经完成的工作。
至少在Chrome和单选按钮上似乎就是这种情况。它：