So erhalten Sie den CSS-Klassennamenwerkteil innerhalb der Eigenschaft

Question

Gibt es eine Option, um den Klassennamenwert innerhalb der Eigenschaft abzurufen. Hier, ich brauche 12.

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

Vielen Dank im Voraus.

Answer 1

Mit so etwas wie die

document.querySelector('div').style['grid-template-columns'] können Sie natürlich den Wert bekommen und dann analysieren, aber in meinen Augen das sieht ein bisschen hässlich.

Das Beste, was Sie tun können, ist die Verwendung eines CSS-Parsers, um die CSS in eine AST-Struktur zu transformieren und darüber zu iterieren. Das hat natürlich seine eigenen Kompromisse und es lohnt sich normalerweise nicht, es im Frontend zu tun, es ist nicht einmal 100% sicher, dass der Parser Ihnen diesen Wert geben wird. z.B. Ich sehe, dass Ihr Code-Schnipsel in einem Parser an folgendem AST Baum

{ 
    "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 wieder verwandelt, haben Sie die 12