Comment ajoutez-vous CSS avec Javascript?

Question

Comment ajouter des règles CSS (par exemple, strong { color: red } ) en utilisant Javascript?

Answer 1

L'approche simple et directe consiste à créer et à ajouter un nouveau nœud style au document.

 var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = "strong { color: red }";
document.body.appendChild(css);
 

Answer 2

Vous pouvez également le faire à l'aide de DOM Niveau 2 CSS interfaces:

sheet.insertRule('strong { color: red; }', sheet.cssRules.length);

...sur tous, mais (bien sûr) c'est à dire, qui utilise sa propre légèrement différentes libellé:

sheet.addRule('strong', 'color: red;', -1);

Il y a un avantage théorique dans ce rapport à la createElement-set-méthode innerHTML, que vous n'avez pas à vous inquiéter au sujet de mettre des caractères spéciaux HTML dans le innerHTML, mais dans la pratique, des éléments de style sont CDATA en héritage HTML, et ‘<' et ‘&' sont rarement utilisés dans les feuilles de style en tout cas.

Vous avez besoin d'une feuille de style en place avant de pouvoir commencé ajoutant comme cela. Qui peut être n'importe quel existante active de la feuille de style externe, incorporé ou vide, il n'a pas d'importance. Si il n'existe pas, le seul moyen standard pour créer c'est à l'heure actuelle avec createElement.

Answer 3

La solution de Ben Blank ne fonctionnerait pas dans IE8 pour moi.

Cependant cela a fonctionné dans IE8

 function addCss(cssCode) {
var styleElement = document.createElement("style");
  styleElement.type = "text/css";
  if (styleElement.styleSheet) {
    styleElement.styleSheet.cssText = cssCode;
  } else {
    styleElement.appendChild(document.createTextNode(cssCode));
  }
  document.getElementsByTagName("head")[0].appendChild(styleElement);
}
 

Voir ici

Answer 4

Voici une version légèrement mise à jour de la solution de Chris Herring , en tenant compte du fait que vous pouvez également utiliser innerHTML au lieu de créer un nouveau nœud de texte:

 function insertCss( code ) {
    var style = document.createElement('style');
    style.type = 'text/css';

    if (style.styleSheet) {
        // IE
        style.styleSheet.cssText = code;
    } else {
        // Other browsers
        style.innerHTML = code;
    }

    document.getElementsByTagName("head")[0].appendChild( style );
}
 

Answer 5

YUI a récemment ajouté un utilitaire spécialement pour cela.