繁体   English   中英

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

How to Determine if ::before is applied to an element?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

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

1 应用于CSS元素:before的背景未应用于整个div [重复]

这个问题已经在这里有了答案: 绝对位置,但相对于父级 4个答案 使用:before伪元素应用于div的背景不适用于整个div。 这是html&css代码。 的HTML 的CSS 该表单位于容器div内,并且页面部分一直延伸到页面末尾。 我已 ...

2019-09-24 13:15:21 1 24   html/ css
2 如何仅将CSS样式应用于div而不应用于before伪元素

我有一个html页面,其div如下所示: 我在div上有一个before伪元素,并且我试图仅将CSS样式应用于div,而这不适用于该伪元素。 该样式将应用于整个div。 是否可以将样式仅限制为div而不限制为伪元素? ...

2017-02-17 18:05:14 2 1327   html/ css
3 是否可以将转换应用于svg元素?

我正在学习如何使用SVG.js,但在将转换(例如偏斜,旋转等)应用于svg(或g)标签时遇到了麻烦。 w3表示svg应该支持animateTransform: https ://www.w3.org/TR/SVG11/struct.html#SVGElement 可以在这里找到一个简 ...

2019-01-22 08:47:46 1 24   svg.js
4 是否可以将模板应用于元素的副本?

是否可以在元素副本上应用模板? 假设我有这个XML: 并希望将其转换为此XML: 而不是在新结构上应用此模板: 所以输出应该是: 重要的是我想在新结构上使用普通模板 到目前为止,我有这个,但它不起作用(不承认新的结构) ...

2016-10-23 12:51:39 0 486   xslt
7 应用于HTML电子邮件时,:: before选择器是否不受支持?

好吧,这可能是一个愚蠢的问题,但我目前没有在网上找到任何有用的材料,以找到我的相当简单但烦人的问题的答案。 尝试在html电子邮件中的列表项之前设置项目符号点时,我遇到了一个非常烦人的问题。 我想要做的就是将列表项转换为正方形,然后将项目符号点为特定颜色,但将列表文本内容保留为黑色。 ...

9 如何确定直接应用于元素的所有 CSS 样式?

是否可以通过styles属性/属性或通过 CSS 选择器获取应用于给定 HTML 元素的所有 CSS 样式? 我正在寻找计算样式,但只寻找元素上设置的那些样式,而不是可以为元素设置的所有现有样式。 这是一个不起作用的例子。 let span = document.querySel ...

10 确定已将哪些CSS选择器应用于元素

有没有办法确定选择器当前是否已应用于给定元素? 我知道可以遍历所有CSS选择器,并测试每个选择器是否合适。 但我不确定这是否是Firebug和其他检查员这样做的方式。 编辑:我需要一种方法来动态地使用JS。 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM