Comment créer une balise <style> avec Javascript

Question

Comment créer une balise <style> avec Javascript

Demandé el 7 de Février, 2009: Quand la question a-t-elle été
75721 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

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

Le meilleur moyen que j'ai trouvé 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. De plus, c'est un peu laid avec le <br>devant pour IE.

Quelqu'un connaît-il un moyen de créer une balise <style> qui

est plus agréable
fonctionne avec Chrome ?

Ou peut-être

c'est une chose non standard que je devrais éviter
trois navig navig navigateurs qui fonctionnent fonctionnent bien et qui utilise Chrome d'ailleurs ?

J'apprécie tout conseil à ce sujet.

Demandé el 7 de Février, 2009 par Utilisateur non enregistré

Answer 1

5 Réponses

Answer 2

753voto

Christoph Points 64389

Essayez d'ajouter le style à l'élément head plutôt que le body .

Ce test a été effectué 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){
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

head.appendChild(style);

Répondu el 7 de Février, 2009 par Christoph (64389 Points )

Answer 3

38voto

Christoph Points 64389

Voici un script qui ajoute le style IE createStyleSheet() et addRule() aux navigateurs qui n'en disposent 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;');

Répondu el 7 de Février, 2009 par Christoph (64389 Points )

Answer 4

37voto

Tom Points 5872

Je suppose que vous voulez insérer un style par rapport à une balise link (faisant référence à un CSS externe), 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>

De plus, j'ai remarqué dans votre question que vous utilisez innerHTML . Il s'agit en fait d'une façon 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.

Pour ce qui est de votre dernière question, vous allez entendre certaines personnes dire que votre travail doit fonctionner sur tous les navigateurs. Tout dépend de votre public. Si personne dans votre public n'utilise Chrome, ne vous en faites pas ; cependant, si vous cherchez à toucher le plus grand nombre de personnes possible, il est préférable de prendre en charge tous les principaux navigateurs de classe A.

Répondu el 7 de Février, 2009 par Tom (5872 Points )

Answer 5

28voto

belaz Points 531

Un exemple qui fonctionne et qui 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);

Répondu el 7 de Février, 2009 par belaz (531 Points )

Answer 6

5voto

Michael Points 31

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

}

Répondu el 18 de Décembre, 2009 par Michael (31 Points )

Comment créer une balise <style> avec Javascript

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment créer une balise <style> avec Javascript

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: