如何获得属性中的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