操作 CSS 伪 ::After 属性

Question

我正在开发一个时间线清理器，其中有一个标记，它可以左右拖动，并带有一个 ::after 元素样式。我需要能够根据存在多少层来设置行的高度，但我看不到如何访问 DOM 元素。我做了一些搜索，虽然有一些解决方案是通过向 body 添加元素，但与直接修改 css 相比，这很快就会变得笨拙和混乱。

我这里有一个演示：http://codepen.io/ajhalls/pen/QdgXBQ

为简单起见，我将其简化为尝试在左右拖动滑块时访问高度。虽然这使用了 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);

    }

});

Answer 1

伪元素不能直接通过 javascript 访问，它们是在样式表中定义的。 可以修改伪元素的方式是编写自己的动态样式表。现在平心而论，我只是快速地模拟了一下，看看它是否可以工作，但我不知道当样式表经常被重新评估时对浏览器的负担有多大。

下面的脚本添加了一个名为jsPseudo 的函数。你传入一个node，一个伪类型和一个字符串（这将返回该属性内的值——如果你之前用这个函数设置过）或一个object，其中键是属性，值是，嗯，值。它会向页面添加一个样式表，当您进行更新时它会重写。

const jsPseudo = function(){
    var pseudos = {},
        count = 1,
        style = document.createElement('style');
    document.body.appendChild( style );
    return function( node, type, keyValues ){
        var id = node.getAttribute('data-has-pseudo');
        if( !id ){
            id = count++;
            node.setAttribute('data-has-pseudo', count);
        }
        id = `[data-has-pseudo="${count}"]:${type}`;
        pseudos[id] = pseudos[id] || {content:''};
        if( typeof keyValues === 'object' ){
            for( let key in keyValues ){
                pseudos[id][key] = keyValues[key];
            }
            style.textContent = '';
            for( let key in pseudos ){
                style.textContent += `${key}{`
                for( attr in pseudos[key] ){
                    style.textContent += `${attr}:${pseudos[key][attr]};`
                }
                style.textContent += `};`;
            }
            return node;
        } else if( typeof keyValues === 'string' ){
            return pseudos[id][keyValues];
        }
    }
}();

jsPseudo( document.body, 'after', {
    'content':'"Hello world!"'
});

console.log( jsPseudo( document.body, 'after', 'content' ) );

至于你的具体代码，你现在可以替换这个：

$(".scrubber-icon").css( "::after", "height", scrubberValue);

用这个：

jsPseudo( this, "after", { height: scrubberValue + 'px'} )

它会为你更新样式表。