Question

早些时候我的问题是： -

我的Sass文件中有以下代码

.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;
}

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

现在我想改变上面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以相应地更改颜色属性。

更新了问题：

我现在正在使用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)

在谷歌寻找同样没有找到任何相关的东西如果你能提供一个解决方案，那么不如将其标记为重复，而是更好。

Answer 1

更改pseudo元素的样式不，因为:after和:before在技术上不属于DOM。您需要找到一种解决方法或使用其他类来实现此目的。

Answer 2

你可以使用更少的库，它允许你在运行时渲染css是reference。

#Updated答案

您可以尝试这样做：

break

并且只要你想像这样更新css就调用这个方法：

.perc-neg.good:before {
    border-color: @BorderColor;
}

从jquery调用Sass函数

2 个答案: