javascript - 按模式获取定义的 CSS 类

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

如此处所见，页面中的所有 css 类都使用 js

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