Javascript 操纵CSS Psuedo:：After属性

我正在开发一个时间轴清理器，其中我有一个标记，它被左右拖动，并在其上设置了：：after元素样式。我需要能够根据存在的层数设置线的高度，但我不知道如何访问DOM元素。我做了一些搜索，虽然有一些解决方案是通过在主体中添加元素，但与直接修改css相比，这将很快变得笨拙和混乱

我这里有一个演示：

为了简单起见，我将其简化为在左右拖动滑块时尝试访问高度。虽然它使用jQuery，但我当然对任何其他使用纯JS的解决方案都很满意

$(".scrubber-icon").draggable({ 
    axis: 'x',
    containment: "parent",
    drag: function( event, ui ) {
        var scrubberValue = ($(".scrubber-icon").position().left-15);
        $(".scrubber-icon").css( "::after", "height", scrubberValue);
       $("#text").html("position:" + scrubberValue);

    }

});

---

伪元素不能通过javascript直接访问，它们是在样式表中定义的。修改伪元素的方法是编写自己的即时样式表。平心而论，我只是很快地模拟了一下，看看它是否有效，但我不知道当样式表经常被重新评估时，浏览器会有多累

下面的脚本添加了一个名为

jsPseudo

的函数。传入一个

节点

、一个伪类型和一个字符串（该字符串将返回该属性内的值-如果之前使用此函数设置它），或一个

对象

，其中键是属性，值是值。它会向页面添加一个样式表，在您进行更新时将其重写

const jsPseudo=function（）{
var pseudos={}，
计数=1，
style=document.createElement（'style'）；
document.body.appendChild（样式）；
返回函数（节点、类型、键值）{
var id=node.getAttribute（'data-has-pseudo'）；
如果（！id）{
id=计数++；
node.setAttribute（'data-has-pseudo'，count）；
}
id=`[data has pseudo=“${count}]”：${type}`；
pseudos[id]=pseudos[id]| |{内容：''}；
if（typeof keyValues==='object'）{
for（让输入keyValues）{
pseudos[id][key]=keyValues[key]；
}
style.textContent=''；
for（让输入伪码）{
style.textContent+=`${key}{`
for（attr in pseudos[密钥]）{
style.textContent+=`${attr}:${pseudos[key][attr]}`
}
style.textContent+=`}；`；
}
返回节点；
}else if（typeof keyValues==='string'）{
返回伪[id][keyValues]；
}
}
}();
jsPseudo（document.body，'after'{
“内容”：“你好，世界！”
});
log（jsPseudo（document.body，'after'，'content'）

使用JS无法轻松修改

：：after

伪元素。在这个例子中最好使用实际的dom节点，尽管我有点不确定你到底在问什么…谢谢，你能给我一个修改元素的例子，而不是addRule或其他类似的方式吗？我希望能够使红线变短变长，这不是通过附加更多的规则，而是修改现有的规则。after元素可以被另一个节点替换，然后你可以做你想做的事情。为什么需要

：：在
之后？因为这两个元素应该使用jQueryUI draggable（）一起移动，最简单的方法是对一个元素进行样式化，我现在不知道如何修改它的高度。我不确定您想要实现什么，我检查了你的密码笔，读了你的问题两遍，但我不明白你想修改的高度。为什么不简单地使用一个节点而不是and after，并向其添加
指针事件：none
，以允许在不受干扰的情况下拖动父节点？非常感谢。我需要将第一行更改为
var jsPseudo=function（）{
，它作为常量的行为不起作用，但作为变量起作用。代码是ES6，因此可能需要根据您使用的内容进行编译：）干杯！