Insérer une balise style en javascript

Imaginons : vous devez insérer un élément ou fragment de document lambda dans un document web via le DOM. Cet élément doit obéir à certaines règles CSS et, comme il n'a aucune raison d'être dans le dit document si la gestion du javascript est désactivée, vous insérez ces règles elles-aussi en manipulant le DOM. L'opération serait finalement triviale s'il n'y avait Internet Explorer.

Précisons d'abord les choses : il s'agit d'un cas particulier où (1) il serait fastidieux d'appliquer les styles directement sur les éléments à insérer avec l'attribut style parce que les règles jouent sur l'héritage et qu'il y aurait trop d'éléments à traiter, et (2) il n'est pas possible de passer par une feuille de styles dédiée. La solution est donc d'avoir une balise style dans l'en-tête de la page web de la manière suivante :

<style type="text/css" media="screen">
    /* règles css */
</style>
1. Balise style dans l'en-tête de la page web.

Pour la créer, il suffirait de faire :

var styles = "body { background: #f00; }";
var styleTag = document.createElement('style');
styleTag.setAttribute('type','text/css');
styleTag.setAttribute('media','screen');
styleTag.appendChild(document.createTextNode(styles));
document.getElementsByTagName('HEAD').item(0).appendChild(styleTag);
2. Création en javascript d'une balise style dans l'en-tête de la page web.

Jusque-là, tout va bien comme dirait l'autre : vous testez sous Firefox, no problemo ; vous testez sous Opera, itou ; et puis vient l'angoisse, la terrible incertitude qui vous vrille l'estomac quand vous décidez de tester ces simplissimes, inoffensives lignes de code sous Internet Explorer… En lieu et place du résultat attendu, un message d'erreur dés plus laconique : « demande d'accès à la méthode ou aux propriétés inattendue ». Tsss… (le déboguage du javascript ou des CSS sous IE est aussi un calvaire qui mériterait un roman à lui tout seul).

Bref, nous voilà dans de beaux draps ! Pourquoi une manipulation du DOM aussi simple échoue-t-elle ? J'en suis encore à me poser la question mais d'autres ont déjà eu à y faire face : apparemment, IE n'accepte pas que l'on insère un noeud enfant dans une balise style. Qu'à cela ne tienne, nous opterons pour une technique détournée :

var styles = "body { background: #f00; }";
var styleTag = document.createElement('style');
styleTag.setAttribute('type','text/css');
styleTag.setAttribute('media','screen');
if (document.all&&!window.opera) {
    styleTag.styleSheet.cssText = styles;
}
else {
    styleTag.appendChild(document.createTextNode(styles));
}
document.getElementsByTagName('HEAD').item(0).appendChild(styleTag);
3. Code corrigé pour Internet Explorer.

N.B. Si vous avez la possibilité d'utiliser un fichier css dédié, le mieux est sans doute d'appliquer les règles css à travers une feuille de style et de l'inclure en javascript.