如何使用Javascript激活元素的:active CSS伪类？

Question

如何使用Javascript激活元素的:active CSS伪类？

javascriptcss

11

这可行吗？

例如，如果用户按下“回车”键并触发“mousedown”事件，我如何同时呈现带有 :active 样式的元素？

我知道可以使用类来实现这一点，但我非常希望使用预先存在的 :active 样式。

- Evan Sharp

这个问题已经被问了很多次。https://dev59.com/c3VC5IYBdhLWcg3wYQEp - Casey Robinson

6

@Casey-我认为这不是你发布链接的同一个问题。在那个链接中，问题基本上是如何通过JavaScript设置伪类。在这里，Evan似乎正在询问如何确保已在CSS中设置的伪类基于JavaScript事件实际激活。换句话说，他预设了:active样式，他正在触发JavaScript事件，他如何确保这些事件导致项目被视为“active”。 - ScottS

谢谢@Scott，你是正确的 - 我在问您是否可以使用JavaScript激活CSS伪类的样式，而不是反过来。 - Evan Sharp

简短的回答是：这是不可能的。 - Nickolay

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RobG · Accepted Answer

根据CSS 2.1 spec，:active伪类应用于以下情况：

当用户激活元素时。例如，在用户按下鼠标按钮和释放它之间的时间内。

您应该能够使用主题元素作为事件目标分派mousedown事件，并且它应保持活动状态，直到分派匹配的mouseup事件。如果它有效，它可能无法在足够多的浏览器上可靠工作，因此没有实际用途。

添加/删除合适的类会更简单（并得到更广泛的支持）。

编辑

这里有一个使用DOMActivate的示例。您可以看到，在元素上分派激活事件会触发关联的onactivate监听器，但不会改变被激活的元素的外观。

也许您可以通过侦听激活事件、添加突出显示元素的类，然后使用setTimeout或类似方法在几秒钟后将其删除来模拟操作。

<style type="text/css">
  p:active {
    background-color: red;
  }
  div:active {
    background-color: green;
  }
</style>

<script type="text/javascript">
  function Init () {
    var p, ps = document.getElementsByTagName('p');
    var d = document.getElementById('div0');

    if (ps.length && ps[0].addEventListener) {

      for (var i=0, iLen=ps.length; i<iLen; i++) {
        p = ps[i];
        p.addEventListener ("DOMActivate", onActivate, false);
      }
      d.addEventListener("DOMActivate", onActivate, false);
    }
  }

  function onActivate () {
    console.log(this.id + ' has been activated');
  }

  function simulateActive(id) {
    var evt = document.createEvent("UIEvents");
    evt.initUIEvent("DOMActivate", true, false, window,1);

    var el = document.getElementById(id); 
    var cancelled = !el.dispatchEvent(evt);

    if(cancelled) {
      console.log("cancelled");

    } else {
      console.log("not cancelled");
    }
  }
</script>

 </head>

<body onload="Init ();">

  <div id="div0">div
    <p id="para0">para0</p>
    <p id="para1">para1</p>
    <button onclick="
      simulateActive('para0');
    ">Activate para</button>
  </div>
  <button onclick="
    simulateActive('para0');
  ">Activate para</button>

</body>