Les pubs vous déplaisent ? Aller Sans pub Auj. 

Convertisseur CSS en objet de style JavaScript

DonnéesPromoteur

PUBLICITÉ · RETIRER?

SAISIR

Processus automatique

SORTIR

Côté client

PUBLICITÉ · RETIRER?

Guide

Convertisseur d'objets de style CSS vers JavaScript

Convertisseur CSS en objet de style JavaScript

Convertissez instantanément les déclarations CSS en objets de style JavaScript, ou inversez le processus pour passer de JS à CSS. Prend en charge cinq formats de sortie, y compris les styles en ligne React, React Native StyleSheet, styled-components, Emotion et les objets JS simples. Gère les préfixes vendeurs, les variables CSS, la détection de valeurs numériques et les blocs de règles CSS complets avec suppression de sélecteurs — le tout côté client dans votre navigateur.

Comment utiliser

Collez vos déclarations CSS dans la zone de saisie et sélectionnez votre format de sortie cible. Le convertisseur transforme automatiquement les noms de propriétés en camelCase, gère les préfixes vendeurs et formate les valeurs de manière appropriée pour la cible choisie. Passez en mode JS-vers-CSS pour reconvertir les objets de style JavaScript en CSS standard. Copiez le résultat dans votre presse-papiers en un clic.

Caractéristiques

Conversion bidirectionnelle – Convertir les déclarations CSS en objets de style JavaScript ou les objets JS en CSS
5 formats de sortie – Styles en ligne React, React Native StyleSheet, styled-components, Emotion css prop et objets JavaScript simples
Gestion des préfixes vendeurs – Convertit correctement -webkit-transform à WebkitTransform, -moz-appearance à MozAppearance, et d'autres propriétés préfixées par un vendeur
Valeurs numériques intelligentes – Conserve les nombres sans unité sous forme d'entiers ("margin: 0 reste 0"), supprime les unités px pour React Native, conserve les valeurs de chaîne avec les unités pour React
Support des variables CSS – Gère les propriétés personnalisées ("--custom-propet var() références
Suppression des sélecteurs – Collez des blocs de règles CSS complets et le convertisseur extrait uniquement les déclarations
Mise en surbrillance de la syntaxe – Sortie codée par couleur pour CSS et JavaScript avec copie dans le presse-papiers

PUBLICITÉ · RETIRER?

 FAQ

Pourquoi les propriétés CSS doivent-elles être en camelCase en JavaScript ?

Les clés des objets JavaScript ne peuvent pas contenir de tirets en tant qu'identifiants bruts. Une propriété comme 'background-color' serait interprétée comme 'background' moins 'color'. La convention dans React et d'autres frameworks JS est d'utiliser des équivalents en camelCase : 'backgroundColor', 'fontSize', 'borderRadius'. Ce convertisseur gère la transformation automatiquement, y compris les règles de capitalisation spéciales pour les préfixes vendeurs.
Quelle est la différence entre la gestion des styles de React et de React Native ?

Les styles en ligne React utilisent des propriétés camelCase avec des valeurs de chaîne qui incluent des unités CSS, donc 'font-size: 16px' devient 'fontSize: '16px''. React Native utilise une API StyleSheet où les valeurs en pixels sont des nombres simples sans unités, donc la même propriété devient 'fontSize: 16'. React Native ne prend pas non plus en charge toutes les propriétés CSS, en particulier les propriétés abrégées comme 'margin' avec plusieurs valeurs.
Comment les préfixes vendeurs sont-ils convertis en JavaScript ?

Les préfixes vendeurs suivent une règle de capitalisation spécifique en JavaScript. Le préfixe perd son tiret initial et est capitalisé : '-webkit-transform' devient 'WebkitTransform', '-moz-appearance' devient 'MozAppearance', et '-ms-grid-columns' devient 'msGridColumns'. Notez que le préfixe 'ms' est en minuscules par convention, tandis que 'webkit', 'moz' et 'o' sont capitalisés.
Puis-je reconvertir des styled-components ou Emotion CSS en CSS simple ?

Oui. En mode JS-vers-CSS, collez un objet de style JavaScript et le convertisseur transformera les propriétés camelCase en propriétés CSS avec tirets, développera les valeurs de chaîne et formatera la sortie en déclarations CSS standard. Cela fonctionne quel que soit le framework JS pour lequel les styles d'origine ont été écrits, car ils utilisent tous la même convention camelCase.

Envie d'une expérience sans pub ? Passez à la version sans pub



 Installez nos extensions

Ajoutez des outils IO à votre navigateur préféré pour un accès instantané et une recherche plus rapide

Sur

恵 Le Tableau de Bord Est Arrivé !

Tableau de Bord est une façon amusante de suivre vos jeux, toutes les données sont stockées dans votre navigateur. D'autres fonctionnalités arrivent bientôt !

PUBLICITÉ · RETIRER?