Appliquer le style CSS de façon dynamique avec JavaScript

Ce qui est un bon moyen pour appliquer un style de manière dynamique (c'est à dire la valeur de styles sont créés au moment de l'exécution) à des éléments HTML avec du JavaScript?

Je suis à la recherche d'un moyen pour l'emballage d'un widget JavaScript (JS, CSS et balisage) dans un seul composant (en gros, un objet). L'idée serait pour le composant pour encapsuler style (de sorte que les utilisateurs ont une bonne API pour modifier la place de plus étroitement associée démarche de modifier le CSS directement et avoir des changements appliqués de manière indirecte). Le problème est qu'un seul appel d'API peut impliquer des changements à plusieurs éléments de style.

La façon dont je voudrais faire est de construire le CSS et le jeu de lastyle atrribute au bon éléments (le plus probable à l'aide de l'ID d'éviter d'appliquer des modifications à d'autres domaines de la majoration). Est-ce une bonne solution? Est-il un meilleur moyen de le faire?

Je voudrais créer des règles css avec JS, le style en ligne solution implique que vous devez modifier tous les attributs de style lorsque vous avez besoin de faire un changement pour un ensemble d'éléments.

OriginalL'auteur Juan Carlos Coto | 2016-02-25

  1. 10

    À L'Aide De Jquery

    Utiliser le css() pour appliquer un style aux éléments existants où l'on passe d'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");

    Vanille JS : 

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

    Avec Css :

    Vous pouvez également utiliser un fichier css contenant les différents styles à l'intérieur des classes, et selon le contexte de l'ajout ou de suppression de ces classes de vos éléments.

    dans votre fichier css, vous pouvez avoir des classes comme 

    .myClass {
    background-color: red;
}

.myOtherClass {
    background-color: blue;
}

    De nouveau à l'aide de 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 manière plus propre qu'il sépare de votre style dans votre logique. Mais si les valeurs de votre css dépend de ce qui est renvoyé par le serveur, cette solution pourrait être difficile à appliquer.

    Cool, j'aime ça. Cependant, après avoir prédéfini CSS est quelque chose que j'aimerais éviter, il faudrait demander aux utilisateurs de savoir comment le widget est structuré en interne, ce qui rompt l'encapsulation. Merci!

    OriginalL'auteur kerwan

  2. 4

    La façon dont je voudrais faire est de construire le CSS et définissez l'attribut style pour les éléments nécessaires. 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.

    "La façon dont je voudrais faire est de construire le CSS et définir le style atrribute les éléments nécessaires "
    Je préfère utiliser le style propriété de l'Élément DOM au lieu de la setAttribute(), quelque chose comme: div.style = 'color: blue, margin-top:5px'
    N'est-ce pas tout de même?
    OP c'est "Est-ce une bonne solution? Est-il un meilleur moyen de le faire?" pas comment ajouter de style en ligne.
    Mozilla états "Paramètre de style de Noter que les styles ne doit PAS être définie par l'affectation d'une chaîne directement à la propriété de style (comme dans l'elt.style = "color: blue;" ), car il est considéré comme étant en lecture seule, car l'attribut style renvoie un objet CSSStyleDeclaration qui est également en lecture seule." -developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

    OriginalL'auteur Dean Meehan

  3. 1

    À l'aide de Vanille JS vous pourriez faire quelque chose comme cela.

    Si vous souhaitez ajouter un classe CSS nommé animer à un élément avec l'Id cercle, faites comme ceci. 

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

    Vous pouvez supprimer la classe comme ça. 

    circle.classList.remove('animate');

    OriginalL'auteur Rahul Gul

  4. 0

    J'ai peut être mal interprété votre question, mais il semble que vous demandez pour un simple modèle d'architecture. Vous voulez quelque chose qui rend plus facile pour quelqu'un qui est à l'aide de votre widget de changer leurs spécifications?

    Si c'est le cas, alors je ne connais pas de modèle spécifique pour le faire sans l'aide de CSS.

    Je peux vous dire que les "widgets" que j'ai trouvé plus facile d'utiliser les deux fichiers CSS. Je trouve qu'il est assez simple de les modifier à mes besoins. Je pense que c'est parce que la structure de l'aide de CSS, le HTML et le Javascript est déjà une belle, simple modèle. Je ne sais pas de qui il n'y a rien de mieux, surtout en considérant que les gens sont déjà très familier avec le HTML/CSS relation.

    La question va dans le sens de la création de composants avec JS qui peuvent être indépendants les uns des autres. Tout ce que vous dites à propos de HTML et CSS standard est tout à fait vrai, c'est plus sur l'emballage des choses d'une manière qui renforce la cohésion et réduit le couplage. Emballé comme cela, les utilisateurs du widget n'a pas besoin de savoir ce que le style est fait dans le but de construire le widget, qui a l'avantage de ne pas exiger d'eux en savent plus que d'une seule API pour interagir avec elle.
    Je pense que vous voulez utiliser .attr('style', '...') ou .css('width, etc', '0px,etc..").

    OriginalL'auteur Chris Dutrow

  5. 0

    Puisque vous avez également demandé si il ya une meilleure façon et vous la construction d'un composant, d'une meilleure façon que je recommande est pour vous de construire un tel composant avec frontend javascript cadre parce qu'ils font de manière dynamique des styles très facile hors de la boîte
    prenons 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>
    )
  }
}
`

    OriginalL'auteur Matovu Ronald