时间戳

首页 > 解决方案 > 伪元素操作

javascript - 伪元素操作

问题描述

我有这个 DOM

<div class="slotvideo">
  <div class="posterimage"></div>
</div>

我无法修改此 html 代码，但我需要添加一个 SVG 图标。此 SVG 用于功能。单击时，我需要到达页面底部。我创建了这个 CSS

.posterimage::before {
  content: "";
  background-image: mysvg;
}

现在，我无法操纵伪元素，但我找不到另一种解决方案。你怎么能解决这个问题？

标签： javascriptjqueryhtmlcss

解决方案

我找不到你真正想要什么。但是关于操纵伪元素，这是不可能的。但是有一个解决方法。

您可以定义另一个类名，例如.active将元素的类更改为它以控制伪元素。

.posterimage {
    /* anything... */
}

.posterimage.active::before {
    content: "";
    background-image: mysvg;
}

别忘了，伪元素默认是内联的，所以如果你想让这个背景图像显示出来，你需要制作它并display: block定义一组。widthheight

它完成了。您可以使用.active该类来控制是否通过JavaScript::before显示或不显示。

推荐阅读