Question

我有一个附有以下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")

这给了我一个可以使用的布尔值开/关，但是以下内容对于读取鼠标长按不起作用。

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

这是因为激活的伪数不会出现在classList中。我尝试重写鼠标检查检查，如下所示：

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

但是因为元素是DIV，所以它永远不会解析为true，因为document.activeElement仍然停留在页面的BODY元素上。我也尝试查看当前的背景颜色，但是在以下情况下不会更新：active正在使用中。

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

还有另一种方法可以继续而不需要求助于删除：从CSS激活并将onclick（）和onmouseout（）安装到我的代码中吗？使用该特定的解决方法不能很好地扩展，具体取决于我以这种方式设置的DIV数量。我更愿意检测DIV当前何时使用上述CSS规则。

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

Answer 1

伪元素不是DOM的一部分，因此您无法触发它们上的事件。

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

另外.style原型函数不能按预期工作，以查找计算样式使用

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

Answer 2

轮询以获取元素的当前状态是一个坏主意，而是使用事件。

^{在轮询时，你正在让CPU始终处理什么，它会使你的页面不负责任，造成无用的瓶颈，但最重要的是，它消耗了大量的电力。在编码时总是考虑树木。}

但是必须承认，对于expect(jest.fn()).toHaveBeenCalled() Expected mock function to have been called. at Object.it (src/form-schema/widgets/Select/index.spec.js:153:22) at Promise (<anonymous>) at Promise.resolve.then.el (node_modules/p-map/index.js:42:16) at <anonymous> at process._tickCallback (internal/process/next_tick.js:169:7)状态，听取可能触发它的所有事件可能有点麻烦。

所以我们必须更聪明，并从那里创建我们自己的活动。

我们可以创建仅在:active状态下触发的空动画然后我们只需要监听animationstart事件，以替代我们的伪类激活事件。

:active

/* older browsers might need vendor prefixes... */
foo.addEventListener('animationstart', function(evt){
  // to be sure it's our correct event, we check for the animationName
  console.log('active', evt.animationName === 'active');
  });

#foo:active{
  background-color: #FAFFAA;
  
  -webkit-animation: active 0s linear;
  -o-animation: active 0s linear;
  -ms-animation: active 0s linear;  
  animation: active 0s linear;
  }
@keyframes active{}
@-webkit-keyframes active{}
@-o-keyframes active{}
@-ms-keyframes active{}

如果您需要随时知道元素是否具有伪类，您可以使用Element.matches(cssRule)。

Answer 3

单词＆＃34; active＆＃34;有不同的含义：

具有:active伪类的元素。这意味着元素通常在点击过程中。例如，当用户在按钮上按下鼠标时，这最常用于创建一些视觉效果，并且当他用鼠标按下时将其移除。这可能与您的用例无关。
document.activeElement给出的元素。不表示具有:active伪类的元素;它表示具有焦点的元素。如果没有特定焦点，它将是正文，或者它可以是某个输入元素，或者它可以是具有tabindex属性的任何其他元素。这也是:focus伪类的元素。可以通过点击元素或对其进行制表或在其上调用HTMLElement#focus来聚焦元素。
某些应用程序定义的＆＃34; active＆＃34;概念，例如选项卡式界面中当前活动的选项卡，通常由元素上存在的用户定义类表示，例如.active。

一般来说，人们写太多JavaScript来检查事物，拦截事件，设置魔术变量，添加和删除类甚至本地样式，或者以最糟糕的jQuery样式添加和删除DOM中的元素，或者上帝禁止进行民意调查，在许多情况下，如果使用得当，CSS可以处理需要做的事情。一个简单的例子就是在mouseover完成工作时编写:hover个处理程序。

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

＆＃13;

const activeElement = document.getElementById("activeElement");
const divElement = document.getElementById("div");

function showActiveElement() { 
  activeElement.textContent = document.activeElement.tagName;
}

function updateActiveElement() { setInterval(showActiveElement, 500); }

function setFocus() { divElement.focus(); }

updateActiveElement();

＆＃13;

/* Show a message if the div is active (being clicked on). */
#activeMessage { display: none; }
#div:active ~ #activeMessage { display: block; }

/* Show a message if the div is focused. */
#focusMessage { display: none; }
#div:focus ~ #focusMessage { display: block; }

/* Style the div when it is focused. */
#div:focus { background-color: rgba(0, 0, 0, 0.75); color: white; }

#div { border: 1px solid gray; }

＆＃13;

<p>
  Here is the div we are working with.
  Click on it, or tab to it, to give it the focus.
</p>

<!-- The div in question. Give it a tabindex to allow focus. -->
<div id="div" tabindex="1">
  Hello Bob
</div>

<p id="activeMessage">
  The div is active, in the sense that the mouse is being clicked on it, and
  therefore its <tt>:active</tt> pseudo-class is set.
</p>

<p id="focusMessage">
  The div is active, in the sense that it has the focus, 
  therefore its <tt>:focus</tt> pseudo-class is set.

<p>
  The element with focus at the moment (<tt>document.activeElement<//tt>) is
  <span id="activeElement"></span>
</p>

<button onclick="setFocus()">Make the div focused ("active")</button>

＆＃13;

检测伪CSS激活

3 个答案:

轮询以获取元素的当前状态是一个坏主意，而是使用事件。