我有这个简单的 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);
我错过了什么?
最佳答案
使用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 {
content:"I am defined"
}
<div class="box"></div>
<div class="alt"></div>
This property is used with the :before and :after pseudo-elements to generate content in a document. Values have the following meanings:
none
The pseudo-element is not generated. ref
如果你想简单地考虑一个过滤器:
const elems = document.querySelectorAll('div');
const divs = [...elems].filter(e => {
var c = window.getComputedStyle(e,"before").getPropertyValue("content");
return c != "none"
});
console.log(divs.length)
.box:before {
content:"I am defined"
}
<div class="box"></div>
<div class="box alt"></div>
<div class="alt"></div>
<div ></div>
关于javascript - 如何确定 if::before 应用于元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58001666/