如何确定 ::before 是否应用于元素？

Question

我有这个简单的 html 代码。我需要能够确定 ::before 是否应用于 .icon-player-flash

    <div id="TestSwitch">

        <i class="icon-player-html5"></i>

        <i class="icon-player-none"></i>

        <i class="icon-player-flash"></i>

    </div>

我认为这会起作用，但它的长度总是返回 0。

var flashplayer = $(".icon-player-flash:before");

console.log("count: " + flashplayer.length);

我错过了什么？

Answer 1

使用getComputedStyle并检查 的值content。如果是，none则未定义伪元素：var elem = document.querySelector(".box");var c = window.getComputedStyle(elem,"before").getPropertyValue("content");console.log(c);var elem = document.querySelector(".alt");var c = window.getComputedStyle(elem,"before").getPropertyValue("content");console.log(c);.box:before {&nbsp; content:"I am defined"}<div class="box"></div><div class="alt"></div>此属性与 :before 和 :after 伪元素一起用于在文档中生成内容。值具有以下含义：没有任何不生成伪元素。参考如果您想计数，只需考虑一个过滤器：const elems = document.querySelectorAll('div');const divs = [...elems].filter(e => {&nbsp; &nbsp;var c = window.getComputedStyle(e,"before").getPropertyValue("content");&nbsp; return c != "none"});console.log(divs.length).box:before {&nbsp; content:"I am defined"}<div class="box"></div><div class="box alt"></div><div class="alt"></div><div ></div>