操纵CSS Psuedo :: After属性 [英] Manipulate CSS Psuedo ::After properties

问题描述

我正在使用一个时间线擦洗器，我在其中有一个标记，左右拖动，并在其上设置了:: after元素。我需要能够根据存在多少层来设置线的高度，但我不知道如何访问DOM元素。我已经做了一些搜索，虽然通过向主体添加元素已经有了一些解决方案，但与简单地直接修改css相比，这会很快变得笨拙和混乱。

I am working on a timeline scrubber where I have a marker that is dragged left and right with a ::after element styled on it. I need to be able to set the height of the line depending on how many layers are present, but I don't see how to access the DOM element. I have done some searching and while there have been some solutions by adding elements to the body, that would quickly become unwieldy and cluttered compared to simply modifying the css directly.

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

I have a demo here: http://codepen.io/ajhalls/pen/QdgXBQ

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

for simplicity sake, I simplified it to trying to access the height on dragging the slider left and right. While this uses jQuery, I am certainly fine with any other solutions that use plain JS as well.

$(".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直接访问，它们是在样式表中定义。 可以修改伪元素的方式是编写自己的动态样式表。现在公平地说，我只是很快就嘲笑它，看看它是否会起作用，但我不知道在经常重新评估样式表时对浏览器的负担如何。

Pseudo elements are not accessible through javascript directly, they are defined in stylesheets. The way you could modify your pseudo elements is by writing your own on-the-fly stylesheet. Now in all fairness, I just quickly mocked this up to see if it would work but I have no idea how taxing on the browser it is when the stylesheet gets reevaluated often.

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

The script below adds a function called jsPseudo. You pass in a node, a pseudo type and either a string (that will return the value inside that attribute - if you set it with this function before) or an object, where the key is the attribute and the value is, well, the value. It adds one stylesheet to the page that it will rewrite as you make updates.

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' ) );

至于您的具体代码，您现在可以将其替换为：

As for your specific code, you could now replace this:

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

这个：

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

它会为你更新样式表。

这篇关于操纵CSS Psuedo :: After属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！