Charger des fichiers CSS dynamiquement avec JavaScript

La fonction loadStyleSheet() permet de charger des feuilles de styles CSS dynamiquement dans une page web.

Elle créée une balise style avec une URL et des attributs spécifiés en arguments et insère la feuille dans le document. Une fois l'insertion effectuée, elle peut exécuter une fonction de rappel.

loadStyleSheet()

Charge une feuille de styles en insérant une nouvelle balise "link" dans la page.

Syntaxe

loadStyleSheet(url, options);

Paramètres

url(String)

Le paramètre url de la fonction loadStyleSheet() définit le chemin de la feuille de styles sur la balise "link" insérée dans la page.

options(Object)

Le paramètre options de la fonction loadStyleSheet() définit les attributs de la balise "link" insérée dans la page et une fonction de rappel à exécuter lorsque la balise est insérée dans la page.

attributes(Object)

La propriété attributes du paramètre options définit les attributs à appliquer à la balise "link" avant insertion dans la page.

callback(Function)

La propriété callback du paramètre options définit une fonction de rappel à exécuter après insertion du fichier de styles dans la page.

var url = 'https://www.domaine.ext/style.css';
var options = {
    attributes: {
        media: 'print'
    },
    callback: function(balise) {

        console.log(balise);

        // renvoie : '<link rel="stylesheet" href="https://www.domaine.ext/style.css" media="print">'
    }
};

loadStyleSheet(url, options);

function loadStyleSheet(u, o) {
  o = o || {};
  var d = document,
      s = d.createElement('link'),
      a = o.attributes || {};
  s.rel = 'stylesheet';
  s.href = u;
  s.onload = function (e) {
    (o.callback || function () {})(s);
  };
  if (Object.keys(a).length > 0) {
    for (var k in a) {
      s.setAttribute(k, a[k]);
    }
  }
  (o.parentTag || d.getElementsByTagName('head')[0]).appendChild(s);
}