Javascript Girl
  1. Javascript Girl
  3. Essayer d'ajouter une étiquette de style à l'aide de javascript (innerHTML dans IE8)
Intereting Posts
Décrivez le processus de rendu de la page dans un navigateur? Comment puis-je empêcher la sélection de texte dans Google Chrome? Focus sur l'élément de liste sur la flèche vers le bas appuyez sur Stockage de tableaux JS et d'objets dans une base de données Webpack crée dynamiquement un module Utilisation de jQuery / javascript Comment vérifier si le fichier JS (SP.JS) est déjà appelé dans une page? Javascript ondrag, ondragstart, ondragend Modification du format d'une chaîne de date Ajout d'images avec JS angulaire Détermination de la position absolue d'un élément sur le document Est-ce sûr pour la fourniture de JSONP? Validator enable using Javascript Iframe accéder à DOM parent? Ios7 problèmes avec la mise au point de la mise au point sur le Web lors de l'utilisation du clavier html Ouverture par programme de la page options.html d'un plugin Chrome?

Essayer d'ajouter une étiquette de style à l'aide de javascript (innerHTML dans IE8)

Cela ne fonctionne pas dans IE8. Je pense que c'est le innerHTML qui cause le problème. Comment résoudre? 

// jQuery plugin (function( $ ){ $.fn.someThing = function( options ) { var d = document, someThingStyles = d.createElement('style'); someThingStyles.setAttribute('type', 'text/css'); someThingStyles.innerHTML = " \ .some_class {overflow:hidden} \ .some_class > div {width:100%;height:100%;} \ "; d.getElementsByTagName('head')[0].appendChild(someThingStyles); }); }; })( jQuery );

JQuery

Puisque vous utilisez déjà jQuery, utilisez: 

  $('<style type="text/css">' + '.some_class {overflow:hidden}' + '.some_class > div {width:100%;height:100%;}' + '</style>').appendTo('head');

Pure JavaScript

Si vous ne souhaitez pas utiliser jQuery, vous devez d'abord ajouter l'élément <style> , puis utiliser la propriété style.styleSheet.cssText (IE-only !!). 

 var d = document, someThingStyles = d.createElement('style'); d.getElementsByTagName('head')[0].appendChild(someThingStyles); someThingStyles.setAttribute('type', 'text/css'); someThingStyles.styleSheet.cssText = " \ .some_class {overflow:hidden} \ .some_class > div {width:100%;height:100%;} \ ";

Si vous n'utilisiez pas jquery, IE avant la version 9 écrit dans un élément de style en assignant une chaîne css au styleelement.styleSheet.cssText.

D'autres navigateurs (y compris IE9 +) vous permettent d'ajouter des nœuds de texte à l'élément directement. 

 function addStyleElement(css){ var elem=document.createElement('style'); if(elem.styleSheet && !elem.sheet)elem.styleSheet.cssText=css; else elem.appendChild(document.createTextNode(css)); document.getElementsByTagName('head')[0].appendChild(elem); }

Vous devriez consulter la spécification CSSOM (Modèle d'objet CSS) – http://dev.w3.org/csswg/cssom/

Vous serez probablement intéressé par la propriété cssText des objets CSSRule – http://dev.w3.org/csswg/cssom/#dom-cssrule-csstext