Vous devriez convertir l'objet en CSS valide.
ne fonctionnera pas car vous demandez ici à ce qu'un objet soit converti en une chaîne de caractères et la conversion ne produira pas le résultat que vous souhaitez.
const styles = {
backgroundColor: 'palevioletred',
color: 'papayawhip',
};
console.log(styles.toString());
Vous pourriez utiliser JSON.stringify()
, mais même alors, vous devriez retirer les accolades, convertir les virgules en points-virgules, supprimer les guillemets superflus et convertir les noms en camel case en noms en casse hypénée.
J'ai fait tout cela ci-dessous et l'ai divisé en étapes individuelles pour montrer ce qui doit être fait, mais cela pourrait être condensé en une seule instruction et même rendu plus compact avec une expression régulière. Cependant, cela devrait vous donner une idée.
FYI: Vous avez besoin d'un $
devant votre littéral de modèle pour l'identifier en tant que tel.
const styles = {
backgroundColor: 'palevioletred',
color: 'papayawhip',
};
let cssString = JSON.stringify(styles);
console.log(cssString);
// Retirer les accolades
cssString = cssString.replace("{","").replace("}","");
console.log(cssString);
// Retirer les guillemets
cssString = cssString.replace(/"/g, "")
console.log(cssString);
// Changer la virgule en point-virgule et ajouter un point-virgule final
cssString = cssString.replace("," ,";") + ";";
console.log(cssString);
// Convertir le camel case en casse hypénée
cssString = cssString.replace("backgroundColor", "background-color");
console.log(cssString);
class TestComponent {
constructor(el) {
this.render(el);
}
render(el) {
var html = `
Un contenu fictif
`;
document.getElementById(el).innerHTML = html;
}
}
let tc = new TestComponent("test");