IT技术 - 如何确定 ::before 是否应用于元素？ - 吾爱随笔录

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

IT技术 javascript jquery css

2021-03-09 13:46:47

我有这个简单的 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);

我错过了什么？

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 {
  content:"I am defined"
}

<div class="box"></div>

<div class="alt"></div>

此属性与 :before 和 :after 伪元素一起使用以在文档中生成内容。值具有以下含义：

没有任何

不生成伪元素。^参考

如果您想计数，只需考虑一个过滤器：

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>

$(this).get(0);<= 实际上与1 + 1 - 1. 您正在包装元素，然后展开它。

2021-04-22 13:46:47

其它你可能感兴趣的问题

上一篇带动画的事件时间线下一篇在 HTML 中预加载图像