CSS zu JavaScript-Stilobjekt-Konverter

CSS zu JavaScript-Stilobjekt-Konverter

Konvertieren Sie CSS-Deklarationen sofort in JavaScript-Stilobjekte oder umgekehrt, um von JS zurück zu CSS zu gelangen. Unterstützt fünf Ausgabeformate, darunter React-Inline-Stile, React Native StyleSheet, styled-components, Emotion und einfache JS-Objekte. Verarbeitet Vendor-Präfixe, CSS-Variablen, Erkennung numerischer Werte und vollständige CSS-Regelblöcke mit Entfernung von Selektoren – alles clientseitig in Ihrem Browser.

Nutzung

Fügen Sie Ihre CSS-Deklarationen in den Eingabebereich ein und wählen Sie Ihr Zielausgabeformat. Der Konverter wandelt Eigenschaftsnamen automatisch in camelCase um, verarbeitet Vendor-Präfixe und formatiert Werte entsprechend Ihrem gewählten Ziel. Wechseln Sie in den JS-zu-CSS-Modus, um JavaScript-Stilobjekte zurück in Standard-CSS zu konvertieren. Kopieren Sie das Ergebnis mit einem Klick in Ihre Zwischenablage.

Funktionen

• Beidrichtige Umwandlung – CSS in JS-Stilobjekte oder JS-Objekte zurück in CSS konvertieren
• 5 Ausgabeformate – React-Inline-Stile, React Native StyleSheet, styled-components, Emotion css prop und einfache JavaScript-Objekte
• Vendor-Präfix-Handhabung – Korrekt konvertiert -webkit-transform Zu WebkitTransform, -moz-appearance Zu MozAppearance, und andere Vendor-Präfix-Eigenschaften
• Intelligente numerische Werte – Behält einheitenlose Zahlen als Ganzzahlen (margin: 0 bleibt 0), entfernt px-Einheiten für React Native, behält Zeichenkettenwerte mit Einheiten für React
• CSS-Variablen-Unterstützung – Verarbeitet benutzerdefinierte Eigenschaften (--custom-prop) und var() Referenzen
• Selektor-Entfernung – Fügen Sie vollständige CSS-Regelblöcke ein und der Konverter extrahiert nur die Deklarationen
• Syntaxhervorhebung – Farblich gekennzeichnete Ausgabe für CSS und JavaScript mit Kopieren in die Zwischenablage