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

Question

I have tried to use getComputedStyle with other pseudo elements and they all worked. But when I try to get the property of:active it always reads the default value.

 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>

Is there a way to do this?

Answer 1

By specification getComputedStyle only accepts pseudo-elements as the second parameter. https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

However, :active is not a pseudo-element but a pseudo-class.

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements