Javascript如何在一个:active伪元素上使用getComputedStyle？

Question

我曾试着在其他伪元素上使用getComputedStyle，它们都能正常工作，但当我试图获取:active的属性时，它总是读取默认值。但是当我尝试获取:active的属性时，它总是读取默认值。

function myFunction() {
  var elem = document.getElementById("test");
  var theCSSprop = window.getComputedStyle(elem, ":active").getPropertyValue("font-size");
  document.getElementById("demo").innerHTML = theCSSprop;
}

div {
  cursor: pointer
}

div:active {
  font-size: 50pt;
}

<div id="test" style="height: 50px;background-color: yellow;">Test Div</div>
<p><button onclick="myFunction()">Show :active font-size</button></p>
<p>The computed font size for div:active in the test div is: <span id="demo"></span></p>

有什么方法可以做到这一点吗？

Answer 1

根据规范，getComputedStyle只接受伪元素作为第二个参数。https:/developer.mozilla.orgen-USdocsWebAPIWindowgetComputedStyle。

然而，:active并不是一个伪元素，而是一个伪类。

https:/developer.mozilla.orgen-USdocsLearnCSSBuilding_blocksSelectorsPseudo-classes_and_pseudo-elements。