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

Question

Is there any option to get the class name value within property. Here, I need 12.

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

Thanks in advance.

Answer 1

Using something like that

document.querySelector('div').style['grid-template-columns'] you can obviously get the value and then parse it but in my eyes that looks kinda ugly.

The best you can to do is to use a css parser to transform the css into a AST tree and iterate over it. That of course has its own trade-offs and usually doesn't worth to do it in the frontend, its not even 100% sure that the parser will give you that value. eg I see that your snippet in a parser is transform to the following AST tree

{
  "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
    }
  ]
}

So again, you have to manually extract the 12