javascript - 操纵 CSS Pseudo::After 属性

Question

我正在开发一个时间线洗涤器，其中有一个标记，可以左右拖动，并在其上设置了::after 元素。我需要能够根据存在的层数设置线条的高度，但我不知道如何访问 DOM 元素。我进行了一些搜索，虽然有一些通过向主体添加元素的解决方案，但与直接修改 css 相比，这很快就会变得笨拙和困惑。

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

为简单起见，我将其简化为尝试通过左右拖动 slider 来访问高度。虽然这使用 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'} )

它会为您更新样式表。