我试图获取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和单选按钮上似乎就是这种情况。它: