4 votes

CSS en JS pour la classe JavaScript vanilla

Si je crée un composant en vanilla JS comme ceci :

class TestComponent {
  constructor(el) {
    this.render(el);
  }

  render(el) {
    var html = `

        Contenu bidon

    `;
    document.getElementById(el).innerHTML = html;
  }
}

Puis-je ajouter du CSS en JS pour cela? Je veux dire quelque chose comme :

const styles = {
  backgroundColor: 'palevioletred',
  color: 'papayawhip',
};

donc la méthode de rendu ci-dessus ressemblera à ceci :

render(el) {
  var html = `

      Contenu bidon

  `;
  document.getElementById(el).innerHTML = html;
}

est-il possible de le faire en dehors des frameworks comme Angular / React ?

5voto

Arthur Points 2289

Vous utilisez un objet JS dans HTML (une chaîne de caractères). Vous devez donc convertir votre objet en une chaîne de caractères HTML valide :

const styles = {
  // La clé CSS est `background-color' au lieu de `backgroundColor'
  'background-color': 'palevioletred', 
  color: 'papayawhip',
}

render(el) {
  // Parcourir chaque clé, et créer un tableau contenant chaque
  // clé: valeur
  // joindre tous les éléments du tableau pour créer une seule chaîne de caractères.
  var string_styles = Object.keys(styles).map(s => { 
    return s + ":" + styles[s]
  }).join(';')

  // Ou
  string_styles = JsToCss(styles)  

  var html = '' +
      'Un contenu factice' +
    '';
  document.getElementById(el).innerHTML = html;
}

// Fonction décomposée:
let JsToCss = (styles) => {
  let keys = Object.keys(styles) 
  // keys = [ 'background-color', 'color']

  let css_values = keys.map(key => {
    return key + ":" + styles
  })
  // css_values = [
  //     'background-color:palevioletred', 
  //     'color:papayawhip'
  // ]

  return css_values.join(';') 
  // return "background-color:palevioletred;color:papayawhip;" 
}

Code non testé mais c'est l'idée

1voto

Scott Marcus Points 45

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");

0voto

Sagar Gavhane Points 425

J'ai créé une fonction genCSS simple qui prend du CSS dans l'objet javascript et le convertit en chaîne CSS, puis le CSS généré est appliqué à la balise style.

const genCSS = (style) => {
  let result = '';
  for (props in style) {
     let keyValuePair = `${props}:${style[props]};`;
     result += keyValuePair;
   }
   return result;
};

const styles = {
  background: '#2196f3',
  color: 'white',
  padding: '5px 10px'
};

class TestComponent {
  constructor(el) {
    this.render(el);
  }

  render(el) {
    const genStyle = genCSS(styles);

    var html = `

        Some dummy content

    `;
    document.getElementById(el).innerHTML = html;
  }
}

const test = new TestComponent('root');

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X