css - 如何获取属性中的 CSS 类名称值部分

Question

是否有任何选项可以获取属性中的类名值。 在这里，我需要 12 个。

.grid-12{
   grid-template-columns: repeat(12, 1fr); 
}

提前致谢。

Answer 1

使用类似的东西

document.querySelector('div').style['grid-template-columns']您显然可以获取值然后解析它，但在我看来这看起来有点丑陋。

最好的办法是使用 css 解析器将 css 转换为 AST 树并对其进行迭代。这当然有其自身的权衡，通常不值得在前端进行，它甚至不能 100% 确定解析器会为您提供该值。例如我看到您在解析器中的代码片段已转换为以下 AST 树

{
  "parentStyleSheet": null,
  "cssRules": [
    {
      "parentRule": null,
      "parentStyleSheet": "[Circular ~]",
      "selectorText": ".grid-12",
      "style": {
        "0": "grid-template-columns",
        "length": 1,
        "parentRule": "[Circular ~.cssRules.0]",
        "_importants": {
          "grid-template-columns": ""
        },
        "__starts": 8,
        "grid-template-columns": "repeat(12, 1fr)"
      },
      "__starts": 0,
      "__ends": 55
    }
  ]
}

因此，您必须再次手动提取 12