获取仅使用setTimeout工作的计算样式

时间:2016-05-19 18:09:12

标签: javascript html css

我试图获取background-color元素的计算样式(span)。这是我的HTML,基本上是两个label元素,其中包含inputspan元素:

<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); } 的情况下提供解决方案吗?关于为什么会发生这种情况的解释也很好,但实际上并不需要:)

检查演示:

1 个答案:

答案 0 :(得分:2)

如果在调用.preventDefault()时设置断点,则可视单选按钮已更改为选择了第二个输入并应用了CSS更改。然后它会在您的代码执行后更改回来。

如果您.preventDefault发生了click事件,但在getComputedStyle()事件期间检查了mouseup,那么它会按预期运行。

编辑:

The DOM3 spec州:

  

默认操作在事件发送完成后执行,但在特殊情况下可能也会在调度事件之前立即执行。

     

与&lt; input type =&#34;复选框&#34;&gt;上的点击事件相关联的默认操作元素切换该元素的已检查IDL属性值。如果取消了click事件的默认操作,则该值将恢复到以前的状态。

所以似乎浏览器可以通过以下方式实现控件:默认操作首先发生,然后调用click处理程序,然后浏览器&#34;阻止默认&#34 34;通过撤消它已经完成的工作。

至少在Chrome和单选按钮上似乎就是这种情况。它:

  1. 更改&#34;已检查&#34;单击的单选按钮的状态(第二个)
  2. 然后调用你的处理程序(现在看到第二个输入被点击,而不是第一个)
  3. 您的处理程序调用{​​{1}} 标记要取消的事件(不会立即取消)
  4. 在事件中看到取消的标记,并将第一个单选按钮设置回&#34;选中&#34;