Javascript 检测伪CSS激活

我有一个附加了以下CSS代码的DIV：

   .active,#foo:active {background-color: rgba(0,0,0,0.75)}

此外，我还设置了keydown和keyup javascript例程来转换所选的按键，以添加和删除“active”类，并相应地使其变暗。我的问题是当用户点击DIV时（按预期将其变暗）…但是在我运行的setInterval中，周期性地轮询DIV和其他一些类似的DIV以获取状态信息，我遇到了无法告知当前DIV状态的问题

通过活动类获取状态非常简单。我只是必须这么做

document.getElementById("foo").classList.contains("active")

这给了我一个布尔开/关，我可以使用，但以下不工作读取鼠标长点击

document.getElementById("foo").classList.contains(":active")

这是因为激活的伪对象不会显示在类列表中。我尝试重写鼠标检查检查，使其如下所示：

document.getElementById("foo") === document.activeElement

但是由于元素是一个DIV，它永远不会解析为true as document.activeElement停留在页面的BODY元素上。我还尝试查看当前的背景色，但以下内容在使用“活动”时不会更新

document.getElementById("foo").style.backgroundColor === "rgba(0,0,0,0.75)"

是否有另一种不需要删除的方法：从CSS中删除active并将onclick（）和onmouseout（）安装到我的代码中？根据我以这种方式设置了多少div，使用这种特定的解决方法无法很好地扩展。我更愿意检测DIV当前使用上述CSS规则的时间

---

请不要使用jQuery解决方案或外部库。我想使用普通JavaScript。

伪元素不是DOM的一部分，因此不能在它们上触发事件

此外，StylePrototype函数不能按预期工作，以查找计算的样式使用

var ele = document.querySelector('.example-value')
window.getComputedStyle(ele, null).backgroundColor === "rgba(0,0,0,0.75)"

轮询以获取元素的当前状态是个坏主意，而不是使用事件。 当轮询时，您总是让CPU无需任何处理，这会使您的页面不负责任，造成无用的瓶颈，但最重要的是，它会白白消耗大量电力。编码时，请始终考虑树

但是必须承认，对于

：active

状态，监听所有可能触发它的事件可能有点麻烦

所以我们必须更聪明一点，从那里创造我们自己的活动

我们可以创建仅在

：active

状态下触发的空动画。
然后，我们只需侦听事件，以替换伪类激活事件

/*较旧的浏览器可能需要供应商前缀*/
foo.addEventListener（'animationstart'，函数（evt）{
//为了确保它是正确的事件，我们检查animationName
log（'active'，evt.animationName=='active'）；
});
#foo:活动{
背景色：#FAFFAA；
-webkit动画：活动的0s线性；
-o-动画：活动0s线性；
-ms动画：活动0s线性；
动画：活动的线性；
}
@关键帧活动{}
@-webkit关键帧处于活动状态{}
@-o-关键帧活动{}
@-ms关键帧处于活动状态{}

单击我以激活我
单词“活动”有不同的含义：

具有伪类的元素。这意味着元素通常正在被单击的过程中。这是最常用的创建一些视觉效果时，用户鼠标按下一个按钮，并删除它时，他鼠标上升，例如。这可能与您的用例无关

由给定的元素。这并不表示元素具有
：active
伪类；它表示焦点为的元素。如果没有特定的焦点，它将是主体，或者它可以是某个输入元素，或者它可以是具有属性的任何其他元素。这也是带有伪类的元素。可以通过单击、标记或调用某个元素来聚焦该元素

一些应用程序定义的“活动”概念，例如选项卡式界面中当前活动的选项卡，通常由元素上的用户定义类表示，例如您的
.active

一般来说，人们编写的JavaScript太多，无法进行检查、拦截事件、设置魔术变量、添加和删除类甚至本地样式，或者在最糟糕的jQuery样式中从DOM中添加和删除元素，或者禁止进行轮询，而在许多情况下，如果使用得当，CSS可以处理需要执行的操作。一个简单的例子是编写
mouseover
处理程序，而
：hover
可以完成这项工作

我不完全理解你想要完成什么，或者你想要的行为是什么。但是，以下代码可能会为您提供一些线索：


const-activeElement=document.getElementById（“activeElement”）；
const divElement=document.getElementById（“div”）；
函数showActiveElement（）{
activeElement.textContent=document.activeElement.tagName；
}
函数updateActiveElement（）{setInterval（showActiveElement，500）；}
函数setFocus（）{divElement.focus（）；}
updateActiveElement（）
/*如果div处于活动状态（正在单击），则显示一条消息*/
#activeMessage{显示：无；}
#div:active~#activeMessage{display:block；}
/*如果div已聚焦，则显示消息*/
#focusMessage{显示：无；}
#div:focus~#focusMessage{display:block；}
/*当div聚焦时，设置其样式*/
#div:focus{背景色：rgba（0,0,0,0.75）；颜色：白色；}
#div{边框：1px实心灰色；}

这是我们合作的部门。
单击它，或单击它的选项卡，使其成为焦点。

你好，鲍勃

div处于活动状态，即鼠标正在其上单击，并且
因此，设置了其：活动伪类。


div是活跃的，因为它有焦点，
因此，设置了它的：focus伪类。

此时具有焦点的元素（document.activeElement）是

麦