Comment créer une balise avec Javascript

Je cherche un moyen d'insérer une balise <style> dans une page HTML avec JavaScript.

La meilleure façon que j'ai trouvée jusqu'à présent: 

var divNode = document.createElement("div");
divNode.innerHTML = "<br><style>h1 { background: red; }</style>";
document.body.appendChild(divNode);

Cela fonctionne dans Firefox, Opera et Internet Explorer mais pas dans Google Chrome. En outre, c'est un peu moche avec le <br> en face pour IE.

Est-ce que quelqu'un connaît un moyen de créer une balise <style> Qui

  1. Est plus agréable

  2. Fonctionne avec Chrome?

Ou peut-être

  1. C'est une chose non standard Je devrais éviter

  2. Trois navigateurs de travail sont grands et qui utilise Chrome de toute façon?

267
demandé sur Tomm 2009-02-08 01:12:30

12 réponses

, Essayez d'ajouter la style de la head plutôt que body.

Cela a été testé dans IE (7-9), Firefox, Opera et Chrome: 

var css = 'h1 { background: red; }',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet){
  // This is required for IE8 and below.
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

head.appendChild(style);
529
répondu Christoph 2018-06-22 07:15:30

Voici un script qui ajoute des méthodes IE-style createStyleSheet() et addRule() aux navigateurs qui ne les ont pas: 

if(typeof document.createStyleSheet === 'undefined') {
    document.createStyleSheet = (function() {
        function createStyleSheet(href) {
            if(typeof href !== 'undefined') {
                var element = document.createElement('link');
                element.type = 'text/css';
                element.rel = 'stylesheet';
                element.href = href;
            }
            else {
                var element = document.createElement('style');
                element.type = 'text/css';
            }

            document.getElementsByTagName('head')[0].appendChild(element);
            var sheet = document.styleSheets[document.styleSheets.length - 1];

            if(typeof sheet.addRule === 'undefined')
                sheet.addRule = addRule;

            if(typeof sheet.removeRule === 'undefined')
                sheet.removeRule = sheet.deleteRule;

            return sheet;
        }

        function addRule(selectorText, cssText, index) {
            if(typeof index === 'undefined')
                index = this.cssRules.length;

            this.insertRule(selectorText + ' {' + cssText + '}', index);
        }

        return createStyleSheet;
    })();
}

, Vous pouvez ajouter des fichiers externes via

document.createStyleSheet('foo.css');

Et créer dynamiquement des règles via

var sheet = document.createStyleSheet();
sheet.addRule('h1', 'background: red;');
31
répondu Christoph 2009-02-23 12:20:31

Je suppose que vous voulez insérer une balise style par rapport à une balise link (référençant un CSS externe), donc c'est ce que fait l'exemple suivant: 

<html>
 <head>
  <title>Example Page</title>
 </head>
 <body>
  <span>
   This is styled dynamically via JavaScript.
  </span>
 </body>
 <script type="text/javascript">
   var styleNode = document.createElement('style');
   styleNode.type = "text/css";
   // browser detection (based on prototype.js)
   if(!!(window.attachEvent && !window.opera)) {
        styleNode.styleSheet.cssText = 'span { color: rgb(255, 0, 0); }';
   } else {
        var styleText = document.createTextNode('span { color: rgb(255, 0, 0); } ');
        styleNode.appendChild(styleText);
   }
   document.getElementsByTagName('head')[0].appendChild(styleNode);
 </script>
</html>

En outre, j'ai remarqué dans votre question que vous utilisez innerHTML. C'est en fait un moyen non standard d'insérer des données dans une page. La meilleure pratique consiste à créer un nœud de texte et à l'ajouter à un autre nœud d'élément.

En ce qui concerne votre dernière question, vous allez entendre certaines personnes dire que votre travail devrait fonctionner dans tous les navigateurs. Tout dépend de votre public. Si personne dans votre audience n'utilise Chrome, alors ne vous inquiétez pas; cependant, si vous cherchez à atteindre le plus grand public possible, alors il est préférable de prendre en charge tous les principaux navigateurs A-grade

29
répondu Tom 2009-02-08 04:37:29

Un exemple qui fonctionne et est compatible avec tous les navigateurs: 

var ss = document.createElement("link");
ss.type = "text/css";
ss.rel = "stylesheet";
ss.href = "style.css";
document.getElementsByTagName("head")[0].appendChild(ss);
21
répondu belaz 2009-02-08 11:17:42

Pour ceux qui utilisent déjà jQuery , vous pouvez utiliser ce one-liner: 

$('<style>'+ styles +'</style>').appendTo(document.head);
15
répondu vsync 2018-03-08 06:28:45

Souvent, il est nécessaire de remplacer les règles existantes, donc ajouter de nouveaux styles à la tête ne fonctionne pas dans tous les cas.

Je suis venu avec cette fonction simple qui résume tout non valide "Ajouter au corps" approches et est juste plus pratique à utiliser et à déboguer (IE8+).

window.injectCSS = (function(doc){
    // wrapper for all injected styles and temp el to create them
    var wrap = doc.createElement('div');
    var temp = doc.createElement('div');
    // rules like "a {color: red}" etc.
    return function (cssRules) {
        // append wrapper to the body on the first call
        if (!wrap.id) {
            wrap.id = 'injected-css';
            wrap.style.display = 'none';
            doc.body.appendChild(wrap);
        }
        // <br> for IE: http://goo.gl/vLY4x7
        temp.innerHTML = '<br><style>'+ cssRules +'</style>';
        wrap.appendChild( temp.children[1] );
    };
})(document);

Démonstration: codepen, jsfiddle

6
répondu Garlaro 2015-08-29 06:07:33

Voici une variante pour ajouter dynamiquement une classe 

function setClassStyle(class_name, css) {
  var style_sheet = document.createElement('style');
  if (style_sheet) {
    style_sheet.setAttribute('type', 'text/css');
    var cstr = '.' + class_name + ' {' + css + '}';
    var rules = document.createTextNode(cstr);
    if(style_sheet.styleSheet){// IE
      style_sheet.styleSheet.cssText = rules.nodeValue;
    } else {
      style_sheet.appendChild(rules);
    }
    var head = document.getElementsByTagName('head')[0];
    if (head) {
      head.appendChild(style_sheet);
    }
  }
}
5
répondu Michael 2015-04-28 20:05:16

Tout bon, mais pour styleNode.cssText pour fonctionner dans IE6 avec le nœud créé par javascipt, vous devez ajouter le nœud au document avant de définir le csstext;

Plus d'informations @ http://msdn.microsoft.com/en-us/library/ms533698%28VS.85%29.aspx

4
répondu Tony 2010-02-24 23:47:40

Cette variable d'objet ajoutera la balise style à la balise head avec l'attribut type et une règle de transition simple à l'intérieur qui correspond à chaque id/classe/élément. N'hésitez pas à modifier la propriétécontent et à injecter autant de règles que nécessaire. Assurez-vous simplement que les règles css à l'intérieur de content restent dans une ligne (ou 'escape' chaque nouvelle ligne, si vous préférez). 

var script = {

  type: 'text/css', style: document.createElement('style'), 
  content: "* { transition: all 220ms cubic-bezier(0.390, 0.575, 0.565, 1.000); }",
  append: function() {

    this.style.type = this.type;
    this.style.appendChild(document.createTextNode(this.content));
    document.head.appendChild(this.style);

}}; script.append();
4
répondu Spooky 2015-02-16 11:43:02

Si le problème auquel vous êtes confronté est d'injecter une chaîne de CSS dans une page, il est plus facile de le faire avec l'élément <link> que l'élément <style>.

Ce qui suit ajoute p { color: green; } règle à la page.

<link rel="stylesheet" type="text/css" href="data:text/css;charset=UTF-8,p%20%7B%20color%3A%20green%3B%20%7D" />

Vous pouvez créer ceci en JavaScript simplement en encodant votre chaîne de CSS et en lui ajoutant l'attribut HREF. Beaucoup plus simple que toutes les bizarreries des éléments <style> ou accéder directement aux feuilles de style.

let linkElement: HTMLLinkElement = this.document.createElement('link');
linkElement.setAttribute('rel', 'stylesheet');
linkElement.setAttribute('type', 'text/css');
linkElement.setAttribute('href', 'data:text/css;charset=UTF-8,' + encodeURIComponent(myStringOfstyles));

Cela fonctionnera dans IE 5.5 vers le haut

0
répondu moefinley 2018-04-19 11:22:55

Cette fonction injectera grammaticalement css chaque fois que vous appelez la fonction appendStyle comme ceci: appendstyle('css you want to inject'). il fonctionne de manière cohérente dans la plupart des navigateurs.

appendStyle = function (content) {
      style = document.createElement('style');
      style.type = 'text/css';
      style.appendChild(document.createTextNode(content));
      document.head.appendChild(style);

    }
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="keywords" content="h, asjkdh, kajhjsdkjh, kjhhgskajhg, vbafd">
  <meta name="description" content="hekkliahsmhdasx">
  <title>helabahe</title>
</head>
<body>

  <h1>this is injected css</h1>
  <p>heloo, this is stuff, hkasjdhakhd</p>
  <button onclick='appendStyle("body {background-color:#ff0000;background-repeat:no-repeat;background-position:top left;background-attachment:fixed;} h1{font-family:Helvetica, sans-serif;font-variant:small-caps;letter-spacing:3px;color:#ff0000;background-color:#000000;} p {font-family:Georgia, serif;font-size:14px;font-style:normal;font-weight:normal;color:#000000;background-color:#ffff00;}")'>press me to inject css!</button>
</body>

</html>
0
répondu DerpMarine 2018-05-29 17:16:51

Var list = document.querySelector ("tête"); liste.innerHTML + = ' h3.l'en-tête 6.panier-article--en-tête span.cusplus {couleur: # c00;}.cusname {couleur: gris; font-size: 14px;}';

200% Code de travail, exemple ci-dessus

0
répondu Kabirr singh sahni 2018-07-16 18:05:34