Question

是否有可能获得与模式匹配的所有已定义的CSS类？

例如，如果你有一些CSS规则定义如下：

.my-custom-class-one {}
.my-custom-class-two {}
.my-custom-class-three {}

我希望有类似的东西：

console.log( getClassNamesByPattern('my-custom-class-*') );

返回匹配类的列表：

[ 'my-custom-class-one', 'my-custom-class-two', 'my-custom-class-three' ]

没有与这些选择器匹配的标记（尚未）。实际上这就是我想创造的......

我想也许像getComputedStyles这样的东西可以做到这一点，但是因为它需要一个不存在的元素，所以它似乎并没什么用处......

Answer 1

以下是一个解决方案：

CSS

.my-custom-class-one {}
.my-custom-class-two {}
.my-custom-class-three {}

JS

function getClassNamesByPattern(pattern) {
    var selectors = {};

    for (var i = 0; i < document.styleSheets.length; i++) {
        var classes = document.styleSheets[i].rules || document.styleSheets[i].cssRules;
        for (var x = 0; x < classes.length; x++) {
            if (undefined !== classes[x].selectorText && null !== classes[x].selectorText.match(new RegExp('\\.' + pattern.replace(/([^\s])\*/, '$1[^ ]+'), 'g'))) {
                selectors[classes[x].selectorText] = classes[x].selectorText;
            }
        }
    }

    return Object.keys(selectors);
}

console.log(getClassNamesByPattern('my-custom-class-*'));

如此处所见all css classes in page using js

...想知道在具有很多样式规则的页面上可能会如何执行。

按模式获取已定义的CSS类

1 个答案: