Question

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

＆＃13;

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

＆＃13;

提前致谢。

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

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

1 个答案: