css - javascript如何修改伪类？

Question

效果是这样：

代码是这样：

//html
<p class="list-height bottom-line bg-setbacks" data-setbacks="30%">
    <p class="dir-row">
        <p>线路1</p>
        <p class="dir-column"><img src="./images/icon.svg" /><span>冰箱</span></p>
    </p>
    <p>332</p>
</p>


//关键的css
.bg-setbacks {
    position: relative;
}
.bg-setbacks::before {
    position: absolute;
    content: '';
    display: block;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: #e4e4e4;
    width: 50%;
    z-index: -10;
}

图里背后的那层灰色阴影，是伪类中的这个属性width: 50%;控制的，但是这个数值需要动态展现，不能写死，于是我参考了这篇文档，通过设置父元素的data-setbacks修改伪类的属性值。

如例：

//html
<p class="test" data-text="TEXT" data-color="red"></p>


//css
.test::before{
    content: attr(data-text);
}
//还可以多个类连写
.test::before {
  content: '我的类是' attr(class) '想要变成' attr(data-color);
}

然而，这个方法貌似只能对伪类的content属性有用，想设置width属性没有任何反应，请问，有什么解决办法？

Answer 1

使用insertRule方法应该可以修改样式insertRule

Answer 2

js改伪类属性这种事情，不用这么多奇淫技巧，你换个思路，在css多写一个带伪类的class选择器，然后把元素换个class不就行了吗？