Question

首先感谢所有愿意帮助我的人。我的问题很大，因此基本上我想要一个方法，该方法可以标识给定HTML元素上的所有当前伪名称。然后检查通过这些伪类添加或修改了哪些CSS样式，并将它们添加到新的HTML元素中。所有这些都应该尽可能地在纯JS和跨浏览器上进行。

这个问题的一部分我自己解决了，但是我对JavaScript的了解不足或想像力不足以完成此工作，因此至少部分找不到相似解决方案的任何好例子。

    constructor() {
        this._options = {
            pseudoElements: ['active', 'checked', 'disabled', 'empty', 'enabled', 'first-child', 'first-of-type', 'focus', 'hover', 'in-range', 'invalid', 'last-child', 'last-of-type', 'link', 'not(*)', 'nth-child(*)', 'nth-last-child(*)', 'only-of-type', 'only-child', 'optional', 'out-of-range', 'read-only', 'read-write', 'required', 'root', 'target', 'valid', 'visited', 'after', 'before']
        }
    }

    _handleElmCss(domElm, newElm) {
        // could not think any better solution then getting all CSS without pseudo then checking with pseudo the same Style object difference. I need as fast as possible way, because i am working with hundred of thousands elements.
        var computedStyle = getComputedStyle(domElm);
              for (var i = 0, len = this._options.pseudoElements.length; i < len; i++) {
                    var pseu_name = this._options.pseudoElements[i];
                    if (this._containsPseudo(domElm, ':' + pseu_name)) {
                        var differentParameters = this._getComputedDifference(pseu_name, computedStyle, domElm);
                        console.log(differentParameters);
                    }
                };
      }

        _getComputedDifference(pseu_name, computed2, domElm) {
            var computed1 = getComputedStyle(domElm, ':' + pseu_name);
            var array1 = [], array2 = [];
            // I belive there is a faster way to convert getComputedStyle to key-value array.
            for (var i = 0; i < computed1.length; i++) {
                var key = computed1[i];
                var value = computed1.getPropertyValue(key);
                if (key != "" && key != null) {
                    array1[i] = value; // i believe this part is incorrect, i mean array-key should be the "key" variable, but i get JS errors.
                }
            }
            for (var i = 0; i < computed2.length; i++) {
                var key = computed2[i];
                var value = computed2.getPropertyValue(key);
                if (key != "" && key != null) {
                    array2[i] = value; // i believe this part is incorrect, i mean array-key should be the "key" variable, but i get JS errors.
                }
            }
            return array1.filter(val => !array2.includes(val));
        }

    _containsPseudo(node, selector) {
        // this method works only with :empty, :hover and so on. :before and :after does not work.
        var nativeMatches = (node.matches || node.msMatchesSelector);
        try {
            return(nativeMatches.call(node, selector));
        } catch (error) {
            return false;
        }
    }

此代码是从我的库中复制的，可能包含一些缺少的部分或类型错误。

最初由这个职位标题需要帮助，请检查任何给定元素是否包含任何伪类，但是如果有人知道我上述其他问题的解决方案，请随时发表评论。谢谢。

这个脚本应该由我的想象力来做的部分（我可能错了）：

检查当前元素是否包含任何伪类。
获取当前伪类的顺序（因此CSS不应被错误覆盖）。
了解当前的伪类，并获取从任何CSS源添加的经过修改的当前样式。
在新元素中添加新的组合样式（仅在伪元素中已更改的样式）。

Answer 1

您可以将getComputedStyle() (W3C Reference)与第二个参数pseudoElt一起使用来获取它。检查此示例：

var el = document.querySelector('#elt'),
pseudo = window.getComputedStyle(el, ':before');
alert(pseudo.getPropertyValue("content"));

#elt:before {
	content: "This element has pseudo class"
}

<div id="elt"></div>

编辑

您可能希望看到此动作：（function from another so answer）

<style>
#elt {
    color:red;
}
#elt2 {
    color:blue;
}
#elt:before {
}
#elt2:first-child {
}
#elt2:after {
}
</style>

<div id="elt">#ELT1</div>
<div id="elt2">#ELT2</div>
<div id="container"></div>
<hr>
<script type="text/javascript">


function ruleSelector(selector) {
    function uni(selector) {
        return selector.replace(/::/g, ':')
    }
    return Array.prototype.filter.call(Array.prototype.concat.apply([], Array.prototype.map.call(document.styleSheets, function(x) {
        return Array.prototype.slice.call(x.cssRules);
    })), function(x) {
        return uni(x.selectorText) === uni(selector);
    });
}

lists = {pseudos: ['active', 'checked', 'disabled', 'empty', 'enabled', 'first-child', 'first-of-type', 'focus', 'hover', 'in-range', 'invalid', 'last-child', 'last-of-type', 'link', 'not(*)', 'nth-child(*)', 'nth-last-child(*)', 'only-of-type', 'only-child', 'optional', 'out-of-range', 'read-only', 'read-write', 'required', 'root', 'target', 'valid', 'visited', 'after', 'before']};

document.write("<h1>#elt</h1>");
for (var i = 0, len = lists.pseudos.length; i < len; i++) {
    var pseudo = lists.pseudos[i];
    if(ruleSelector("#elt:"+pseudo).length)
        document.write("<strong>#elt has :"+pseudo+"</strong><br>");
    else
        document.write("<small>#elt hasn't :"+pseudo+"</small><br>");
}

document.write("<h1>#elt2</h1>");
for (var i = 0, len = lists.pseudos.length; i < len; i++) {
    var pseudo = lists.pseudos[i];
    if(ruleSelector("#elt2:"+pseudo).length)
        document.write("<strong>#elt2 has :"+pseudo+"</strong><br>");
    else
        document.write("<small>#elt2 hasn't :"+pseudo+"</small><br>");
}

</script>

我刚刚修改了代码，您也可以这样做。享受。

使用纯js /跨浏览器解决方案检查元素中是否存在伪类（：after，：before，...）

1 个答案: