Javascript Girl
  1. Javascript Girl
  3. Ajouter CSS à <head> avec JavaScript?
Intereting Posts
Js / css change le curseur Ajout de hashtag à l'URL avec javascript CSS Alternate Rows – certaines lignes cachées Javascript – regex – problème de limite de mots (\ b) Express | Exécuter de multiples requêtes HTTP de manière asynchrone Erreur JavaScript "Accès refusé" dans Internet Explorer Documentation sur les balises <FIELDSET> <LABEL> au lieu d'utiliser le TABLE? JS Function-constructor a-t-il été analysé chaque fois? Quel est l'équivalent de wget dans javascript pour télécharger un fichier à partir d'une URL donnée? Accès à Object of Magento Admin Grid via Java-Script En utilisant easyXDM pour communiquer entre le document parent et l'iframe enfant chargé à partir d'un domaine différent (Amazon) Javascript variable dans php Les nouveaux Webkits convergent la virgule décimale en ~ point et vice versa dans les entrées de type numéro. Nom Javascript de cette fonctionnalité de navigateur? Comment obtenir un décalage UTC dans javascript (analogique de TimeZoneInfo.GetUtcOffset en C #) La page de Javascript recharge tout en maintenant la position actuelle de la fenêtre

Ajouter CSS à <head> avec JavaScript?

Existe-t-il un moyen d'ajouter css à partir d'une chaîne dans le fichier javascript à la tête d'un document avec javascript?

Disons que nous avons une page Web, qui a un script lightbox, ce script nécessite un fichier css pour fonctionner.

Maintenant, ajouter ce fichier css avec <link> rendra le fichier css téléchargé même pour les personnes qui n'ont pas js activé.

Je sais que je peux charger dynamiquement le fichier css avec le script, mais cela signifie aussi qu'il y aura 2 requêtes http, et dans les cas où il y a peu ou pas de css dans le fichier, je trouve cela inefficace.

Donc, je me suis pensé, que faire si vous pouviez mettre le css que vous avez dans le fichier css, dans le script, demander au script d'analyser le css et de l'ajouter à la tête, ou même mieux, il suffit que le script ajoute le css directement dans <head> du document.

Mais je n'ai trouvé rien en ligne qui suggère que cela est possible, alors est-il possible d'ajouter css à la tête avec js?

Modifier + SOLUTION:

J'ai édité la réponse de roryf pour travailler dans le navigateur croisé (sauf IE5)

Javascript: 

  function addcss(css){ var head = document.getElementsByTagName('head')[0]; var s = document.createElement('style'); s.setAttribute('type', 'text/css'); if (s.styleSheet) { // IE s.styleSheet.cssText = css; } else { // the world s.appendChild(document.createTextNode(css)); } head.appendChild(s); }

Si vous ne voulez pas compter sur une bibliothèque javascript, vous pouvez utiliser document.write() pour cracher le css requis, enveloppé dans style balises de style , directement dans la head du document: 

 <head> <script type="text/javascript"> document.write("<style>body { background-color:#000 }</style>"); </script> # other stuff.. </head>

De cette façon, vous évitez de déclencher une requête HTTP supplémentaire.

Il existe d'autres solutions qui ont été suggérées / ajoutées / supprimées, mais je ne vois aucun problème pour compliquer trop de choses qui fonctionnent déjà correctement. Bonne chance!

http://jsbin.com/oqede3/edit

Edit : Comme le suggèrent les commentaires d'Atspulgs, vous pouvez réaliser les mêmes sans jQuery à l'aide de querySelector : 

 document.querySelector('head').innerHTML += '<link rel="stylesheet" href="styles.css" type="text/css"/>';

Plus ancienne réponse ci-dessous.

Vous pouvez utiliser la bibliothèque jQuery pour sélectionner votre élément principal et lui ajouter HTML, de la manière suivante: 

 $('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');

Vous pouvez trouver un tutoriel complet pour ce problème ici

Une solution simple non-jQuery, bien qu'avec un peu de hack pour IE: 

 var css = ".lightbox { width: 400px; height: 400px; border: 1px solid #333}"; var htmlDiv = document.createElement('div'); htmlDiv.innerHTML = '<p>foo</p><style>' + css + '</style>'; document.getElementsByTagName('head')[0].appendChild(htmlDiv.childNodes[1]);

innerText , IE ne permet pas de définir innerText , innerText ou d'utiliser appendChild sur style éléments de style . Voici un rapport de bogue qui démontre cela, bien que je pense qu'il identifie le problème de manière incorrecte. La solution de contournement ci-dessus provient des commentaires sur le rapport de bogue et a été testé dans IE6 et IE9.

Que vous utilisiez ceci, document.write ou une solution plus complexe dépendra de votre situation.

Voici une fonction qui créera dynamiquement une règle CSS dans tous les principaux navigateurs. createCssRule prend un sélecteur (p. Ex. "P.purpleText"), une règle (p. Ex. "Couleur: violet") et éventuellement un Document (le document actuel est utilisé par défaut): 

 var addRule; if (typeof document.styleSheets != "undefined" && document.styleSheets) { addRule = function(selector, rule) { var styleSheets = document.styleSheets, styleSheet; if (styleSheets && styleSheets.length) { styleSheet = styleSheets[styleSheets.length - 1]; if (styleSheet.addRule) { styleSheet.addRule(selector, rule) } else if (typeof styleSheet.cssText == "string") { styleSheet.cssText = selector + " {" + rule + "}"; } else if (styleSheet.insertRule && styleSheet.cssRules) { styleSheet.insertRule(selector + " {" + rule + "}", styleSheet.cssRules.length); } } } } else { addRule = function(selector, rule, el, doc) { el.appendChild(doc.createTextNode(selector + " {" + rule + "}")); }; } function createCssRule(selector, rule, doc) { doc = doc || document; var head = doc.getElementsByTagName("head")[0]; if (head && addRule) { var styleEl = doc.createElement("style"); styleEl.type = "text/css"; styleEl.media = "screen"; head.appendChild(styleEl); addRule(selector, rule, styleEl, doc); styleEl = null; } }; createCssRule("body", "background-color: purple;");