web-dev-qa-db-fra.com

Appliquer le CSS de manière dynamique avec JavaScript

Quel est le bon moyen d'appliquer un style de manière dynamique (c'est-à-dire que la valeur des styles sont créés au moment de l'exécution) sur des éléments HTML avec JavaScript?

Je cherche un moyen de regrouper un widget JavaScript (JS, CSS et balisage) dans un seul composant (essentiellement un objet). L'idée serait que le composant encapsule le style (les utilisateurs disposent donc d'une API Nice pour le modifier au lieu d'une approche plus étroitement couplée de la modification directe du CSS et de l'application indirecte des modifications). Le problème est qu'un seul appel d'API peut impliquer des modifications sur plusieurs éléments de style. 

La façon dont je le ferais est de construire le CSS et de définir l'attribut style aux éléments appropriés (en utilisant probablement l'ID pour éviter d'appliquer des modifications aux autres zones du balisage). Est-ce une bonne solution? Y a-t-il une meilleure façon de le faire?

javascriptcssencapsulationstylingweb-component
8
Juan Carlos Coto

Utilisation de Jquery  

Utilisez la fonction css () pour appliquer un style aux éléments existants dans lesquels vous transmettez un objet contenant des styles: 

var styles = {
  backgroundColor : "#ddd",
  fontWeight: ""
};
$("#myId").css(styles);

Vous pouvez également appliquer un style à la fois avec: 

$("#myId").css("border-color", "#FFFFFF");

Vanilla JS:  

var myDiv = document.getElementById("#myId");
myDiv.setAttribute("style", "border-color:#FFFFFF;");

Avec Css:

Vous pouvez également utiliser un fichier CSS séparé contenant les différents styles nécessaires dans les classes et, en fonction du contexte, vous ajoutez ou supprimez ces classes à vos éléments.

dans votre fichier css, vous pouvez avoir des cours comme 

.myClass {
    background-color: red;
}

.myOtherClass {
    background-color: blue;
}

De nouveau en utilisant jQuery, pour ajouter ou supprimer une classe à un élément, vous pouvez utiliser 

$("#myDiv").addClass('myClass');

ou 

$("#myDiv").removeClass('myClass');

Je pense que c’est une façon plus nette de séparer votre style de votre logique. Mais si les valeurs de votre css dépendent de ce qui est renvoyé par le serveur, cette solution pourrait être difficile à appliquer.

10
kerwan

La façon dont je le ferais est de construire le CSS et de définir l'attribut style sur les éléments appropriés. Par exemple:

var div = document.createElement('div');
div.setAttribute("style", "color: blue, margin-top:5px");
document.body.appendChild(div);

Ce code va créer un nouvel élément div avec le style color: blue, margin-top:5px et l'ajouter à la page.

4
Dean Meehan

En utilisant Vanilla JS vous pourriez faire quelque chose comme ça. 

Si vous voulez ajouter un classe CSS named animate à un élément avec Id circle , procédez comme suit. 

var circle = document.getElementById("circle");
circle.classList.add('animate');

Vous pouvez supprimer la classe comme ceci. 

circle.classList.remove('animate');
1
Rahul kalivaradarajalu

Etant donné que vous avez également demandé s'il existait un meilleur moyen de créer un composant, un meilleur moyen que je vous recommande est de le créer avec le framework javascript frontend, car ils facilitent grandement les styles dynamiques. un exemple de Vuejs, Reactjs

`      
import React, {Component} from 'react'
import styled from 'styled-jss'
const Circle = styled('div')({
  position: 'absolute',
  width: 50,
  height: 50,
  borderRadius: '50%',
  background: (props) => (
    /* Generates a random or based on props color */
  ),
  transform: (props) => (
    /* Generates a random or based on props transform for  positioning */
  )
})
class Demo extends Component {
  componentDidMount() {
    this.tick()
  }
  tick = () => {
    requestAnimationFrame(() => {
      this.setState({/* Some new state */}, this.tick)
    })
  }
  render() {
    return (
      <div>
        {[...Array(amount)].map(() => <Circle />)}
      </div>
    )
  }
}
`
0
Matovu Ronald

Je pourrais mal interpréter votre question, mais il semblerait que vous demandiez un modèle architectural simple. Vous voulez quelque chose qui facilite la tâche de quelqu'un qui utilise votre widget pour le modifier selon ses spécifications?

Si tel est le cas, je ne connais aucun modèle particulier permettant de le faire sans utiliser CSS.

Je peux vous dire que les "widgets" que j'ai trouvés les plus faciles à utiliser ont des fichiers CSS distincts. J'ai trouvé assez simple de les modifier à mes besoins. Je pense que cela est dû au fait que la structure d'utilisation de CSS avec HTML et Javascript est déjà un modèle simple et agréable. Je ne sais pas s'il y a quelque chose de mieux, surtout que les gens connaissent déjà très bien la relation HTML/CSS.

0
Chris Dutrow