J'essaie de convertir JavaScript en styles CSS, j'ai pu convertir au format CSS, mais il y avait un problème. Je n'ai pas pu supprimer Double Quort " strong> ou ' strong>' strong>" p>
.time{
"color":"red",
"background-color":"yellow",
"height":"10%",
"zindex":1
};
#next{
"colour":"#eee"
};
div{
"width":10,
"-webkit-hyphenate-character":"auto"
};
@keyframes example{
"0%":{"background-color":"red"},
"25%":{"background-color":"yellow"}
};
3 Réponses :
Vous pouvez utiliser regex pour remplacer chaque mais vous aurez toujours d'autres problèmes, vous séparez des règles CSS avec vous pouvez remplacer votre code avec ceci et fonctionner P > p> " code> avec une chaîne vide , code> qui devrait être ; code> et vous ajoutez : code> après le sélecteur qui ne devrait pas être là p> var style = nom + '' + json.stringify (valeur) .replace (/ "/ g, ''). Remplacer (/, / g, ';') + '\ n'; / Code> P>
var a = {
".time":{
"color":"red",
'background-color':'yellow',
height:'10%',
zindex:1
},
'#next':{
'colour':'#eee'
},
div:{
width:10,
'-webkit-hyphenate-character': 'auto'
},
"@keyframes example" : {
"0%" : {"background-color": 'red'},
"25%" : {"background-color": 'yellow'}
}
}
var toStyles = function(object){
var store = '';
Object.keys(object).forEach(name => {
var value = object[name];
if(typeof value == 'object'){
}
var style = name+' '+JSON.stringify(value).replace(/"/g,'').replace(/,/g,'; ')+'\n';
store = store + style;
});
console.log(store)
}
toStyles(a)
Je suppose que la propriété VANUE contient " Veuillez consulter la sortie de la sortie.
quelle sortie voulez-vous dire? Il n'y a pas de "dans ma sortie
Cela devrait vous aider à démarrer, mais notez qu'il ne gère pas les propriétés imbriquées (par exemple, p> keyframes code>), mais cela est trivial pour ajouter un appel récursif.
let input = {
".time": {
"color": "red",
'background-color': 'yellow',
height: '10%',
zindex: 1
},
'#next': {
'colour': '#eee'
},
div: {
width: 10,
'-webkit-hyphenate-character': 'auto'
},
"@keyframes example": {
"0%": {"background-color": 'red'},
"25%": {"background-color": 'yellow'}
}
};
let output = Object.entries(input).map(([selector, properties]) => `${selector} {\n${Object.entries(properties).map(([name, value]) => `\t${name}: "${value}";`).join('\n')}\n}`).join('\n\n');
console.log(output);
@keyframes exemple {0%: "[Objet objet]"; 25%: "[Objet d'objet]"; } ici votre problème est. [objet Objet]…
Je cherchais également la même chose grâce à la publication de cette question. Cela peut gérer tout ce que vous voulez que vous ayez mentionné sur votre question.
var a = {
'div':{
"width": "100px",
"height": "100px",
"background": "red",
"position": "relative",
"-webkit-animation": "mymove 5s infinite",
"animation": "mymove 5s infinite"
},
'@-webkit-keyframes mymove':{
'0%':{'top': '0px;'},
'25%':{'top': '200px;'},
'75%': {'top': '50px'},
'100%': {'top': '100px'},
},
'@keyframes mymove':{
'0%' : {'top': '0px'},
'25%' : {'top': '200px'},
'75%' : {'top': '50px'},
'100%' : {'top': '100px'}
}
}
String.prototype.replaceAt=function(index, replacement) {
return this.substr(0, index) + replacement+ this.substr(index +
replacement.length);
}
var indexes = function(string , char){
var result = [];
for(var i = 0 ; i < string.length ; i++ ){
var pos1 = string.substr( i , char.length);
if(pos1 == char){
result.push(i)
}
}
return(result)
}
var maker = function(value){
var a = JSON.stringify(value).replace(/"/g,'').replace(/,/g,'; '),
index = indexes(a,'%:')
index2 = indexes(a,'};');
if(index && index.length > 0){
for(var i = 0 ; i < index.length ; i++){
a = a.replaceAt(index[i]+1, " ");
}
}
if(index2 && index2.length > 0){
for(var i = 0 ; i < index2.length ; i++){
a = a.replaceAt(index2[i]+1,' ');
}
}
return a;
};
var toStyles = function(object){
var store = '';
Object.keys(object).forEach(name => {
var value = object[name];
var style = name+' '+maker(value)+'\n';
store = store + style;
});
return(store)
}
console.log(toStyles(a))
Si cela aide: Stackoverflow.com/questions/ 41303191 / ...