如何獲得屬性中的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