如何从Javascript中调用访问伪元素样式？ [重复]

Question

这个问题已经在这里有答案 ：

3年前关闭。

使用jQuery选择和操作CSS伪元素，例如:: before和:: after （21个答案）

之前我的问题是：

我的Sass中有以下代码 的CSS 文件

.random {
    box-sizing: content-box;
    text-align: center;
    line-height: 1;

    &:before {
        display: inline-block;
        margin-right: 0.2em;
        width: 0;
        height: 0;
        border-right: 0.4em  solid transparent;
        border-left: 0.4em solid transparent;
        content: "";
        vertical-align: baseline;
    }
}

.perc-neg:before {
    border-top: 0.5em solid #FCB062;
}

.perc-neg.good:before {
    border-top: 0.5em solid #98F1AC;
}

我有一个class =“ random perc-neg good”的div

现在，我想更改上面div的样式。 怎么做？

我尝试在控制台中执行以下操作，但返回空对象

$("random perc-neg good:before").css("color","red");
$("random.perc-neg.good:before").css("color","red");
$(".random.perc-neg.good:before").css("color","red");

有人建议它可能重复，但事实并非如此。

在相关问题中，用户只是想使其可见或隐藏，所以两个类就足够了。

但是我的要求是根据用户的选择更改颜色，他可以从多种颜色中进行选择。

定义每个颜色变化的类绝对是不可能的。

而且我们也不能将某些变量传递给css来相应地更改color属性。

更新的问题：

我现在正在使用Sass。 我定义了一个更新颜色的函数

@function em($color) {
  @return border-bottom: 0.5em solid $color;
 }

.perc-neg.good:before {
    em(#98F1AC);
}

绝对可以，我可以从Sass文件中调用该函数，但是如何从javascript中调用它

现在我想通过javascript传递颜色的十六进制代码

我需要通过javascript传递类似的内容

.perc-neg.good:before(#98F1AC)

在google中查找了相同的内容，但未找到任何相关内容，而不是将其标记为重复项，如果可以提供解决方案，那就更好了

Answer 1

您无法在Javascript中访问伪元素，因为这些元素不在DOM中 。

如果要更改伪元素样式，则需要为此预先定义css类，并根据触发事件添加/删除这些类。

如果这是不可能的，根本就没有设置color ，在所有的伪元素属性，但该主机元素，因为:before和:after会再继承其主元素的颜色属性（如果他们没有一个特定的在CSS中分配给自己的color属性）。

Answer 2

您无法从javascript调用SASS / LESS函数，因为它们都是预编译器，它们只会生成静态样式表。

如果您的调色板有限，则可以创建涵盖用例的所有规则。

但是，您确实可以使用javascript创建样式元素并为其添加新规则。 这是一个可以扩展的简单示例

 // add Style is wrapped in a closure that locks in a single // style element that you can add to on the fly const addStyle = (() => { // create and append the style element const styleSheet = document.createElement('style') document.head.appendChild(styleSheet) const style = styleSheet.sheet // helper function to serialize an object to a css string const serializeStyle = (styles) => { return Object.keys(styles).reduce((str, prop) => { return str + kebabCase(prop) + ':' + styles[prop] + ';' }, '') } // helper function to convert camelCase to kebab-case const kebabCase = (str) => str.replace(/([AZ])/g, (_, letter) => '-'+ letter.toUpperCase()) // return the public function return (selector, styles) => { // add a new rule to the created stylesheet style.insertRule( selector + '{' + serializeStyle(styles) + '}', style.cssRules.length ) } })() addStyle('.random::before', { border: '10px solid #aec369' }) addStyle('.random::before', { background: '#bada55', boxShadow: '5px 5px 10px #777' }) const el = document.querySelector('#color') const em = () => { addStyle('.random::before', { borderColor: el.value }) } el.addEventListener('keyup', em) el.addEventListener('change', em) 

 .random { position: relative; background-color: #eee; } .random::before { content: ''; display: block; height: 200px; width: 200px; } 

 <input id="color" placeholder="#000000" /> <div class="random"> </div>