Comment supprimer dynamiquement une feuille de style de la page en cours ?

Question

Existe-t-il un moyen de supprimer dynamiquement la feuille de style actuelle de la page ?

Par exemple, si une page contient :

<link rel="stylesheet" type="text/css" href="http://..." />

...existe-t-il un moyen de le désactiver ultérieurement avec JavaScript ? Des points supplémentaires pour l'utilisation de jQuery.

Answer 1

En supposant que vous puissiez le cibler avec jQuery, il devrait être aussi simple que d'appeler remove() sur l'élément :

$('link[rel=stylesheet]').remove();

Cela supprimera tous des feuilles de style externes sur la page. Si vous connaissez une partie de l'url, vous pouvez supprimer celle que vous recherchez :

$('link[rel=stylesheet][href~="foo.com"]').remove();

Et en Javascript

Voici un exemple de suppression de tous les éléments avec un sélecteur de requête et un tableau foreach.

Array.prototype.forEach.call(document.querySelectorAll('link[rel=stylesheet]'), function(element){
      try{
        element.parentNode.removeChild(element);
      }catch(err){}
    });

//or this is similar
var elements = document.querySelectorAll('link[rel=stylesheet]');
for(var i=0;i<elements.length;i++){
    elements[i].parentNode.removeChild(elements[i]);
}

Answer 2

Si vous connaissez l'ID de la feuille de style, utilisez ce qui suit. Toute autre méthode pour obtenir la feuille de style fonctionne également, bien sûr. Cette méthode est directement DOM et ne nécessite pas l'utilisation de bibliothèques.

var sheet = document.getElementById(styleSheetId);
sheet.disabled = true;
sheet.parentNode.removeChild(sheet);

Answer 3

J'ai trouvé cette page en cherchant un moyen de supprimer les feuilles de style en utilisant jquery. Je pensais avoir trouvé la bonne réponse quand j'ai lu ce qui suit

Si vous connaissez une partie de l'url, vous pouvez supprimer uniquement celle que vous recherchez : $('link[rel=stylesheet][href~="foo.com"]').remove();"

J'ai aimé cette solution car les feuilles de style que je voulais supprimer avaient le même nom mais se trouvaient dans des dossiers différents. Cependant, ce code ne fonctionnait pas, j'ai donc changé l'opérateur en *= et cela fonctionne parfaitement :

$('link[rel=stylesheet][href*="mystyle"]').remove();

J'ai juste pensé que je devais partager ça au cas où ça serait utile à quelqu'un.

Answer 4

Cela désactivera toute feuille de style correspondant à la expression régulière searchRegEx fourni par rapport à l'URL de chaque feuille de style.

let searchRegEx = /example.*/;

for (var i = 0; i < document.styleSheets.length; i++) {
    if (document.styleSheets[i].href.search(searchRegEx) != -1) {
        document.styleSheets[i].disabled = true;
    }
}

Answer 5

Personne n'a mentionné la suppression d'une feuille de style spécifique sans ID en Javascript :

 document.querySelector('link[href$="something.css"]').remove()

("$=" pour trouver à la fin du href)