我有一个附加了以下 CSS 代码的 DIV:
.active,#foo:active {background-color: rgba(0,0,0,0.75)}
此外，我还设置了 keydown 和 keyup javascript 例程来转换选定的按键以添加和删除“事件”类，并相应地使它变暗。我的问题是当用户点击 DIV(按预期使它变暗)时......但是在我运行的 setInterval 中，定期轮询 DIV 和其他几个类似的以获取状态信息，我遇到了无法告诉当前 DIV 状态。
通过事件类获取状态非常简单。我只需要这样做...
document.getElementById("foo").classList.contains("active")
这给了我一个我可以使用的 bool 值开/关，但下面的代码无法读取鼠标长按。
document.getElementById("foo").classList.contains(":active")
这是因为激活的伪类没有出现在类列表中。我尝试重写鼠标检查检查，使其看起来像这样:
document.getElementById("foo") === document.activeElement
但由于该元素是一个 DIV，因此它永远不会解析为 true，因为 document.activeElement 停留在页面的 BODY 元素上。我还尝试查看当前的背景颜色，但在使用 :active 时以下内容不会更新。
document.getElementById("foo").style.backgroundColor === "rgba(0,0,0,0.75)"
是否有另一种方法可以继续进行而不需要从 CSS 中删除 :active 并将 onclick() 和 onmouseout() 安装到我的代码中？根据我以这种方式设置的 DIV 的数量，使用该特定解决方法的扩展效果不佳。我更愿意检测 DIV 当前何时使用上述 CSS 规则。
请不要使用 jQuery 解决方案或外部库。我想使用原生 JavaScript。
最佳答案
伪元素不是 DOM 的一部分，因此您无法在其上触发事件。
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
此外 .style 原型(prototype)函数没有按预期工作，要查找计算样式使用
var ele = document.querySelector('.example-value')
window.getComputedStyle(ele, null).backgroundColor === "rgba(0,0,0,0.75)"
https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
关于javascript - 检测伪 CSS 激活，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44578580/