Question

我正在使用一个时间线擦洗器，我在其中有一个标记，左右拖动，并在其上设置了:: after元素。我需要能够根据存在多少层来设置线的高度，但我不知道如何访问DOM元素。我已经做了一些搜索，虽然通过向身体添加元素已经有了一些解决方案，但与简单地直接修改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'} )

它会为你更新样式表。

操纵CSS Psuedo :: After属性

1 个答案: