web-dev-qa-db-fra.com

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

Est-il possible 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://..." />

... y a-t-il un moyen de le désactiver plus tard avec JavaScript? Points supplémentaires pour l'utilisation de jQuery.

javascriptjquerycssstylesheet
37
Nathan Osman

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

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

Cela supprimera tout les feuilles de style externes sur la page. Si vous connaissez une partie de l'URL, vous pouvez supprimer uniquement celle que vous recherchez:

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

Et en Javascript

ceci est un exemple de supprimer tout avec sélecteur de requête et 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]);
}
60
Brian Donovan

Si vous connaissez l'ID de la feuille de style, utilisez ce qui suit. Toute autre méthode d'obtention de la feuille de style fonctionne également, bien sûr. C'est du DOM direct et ne nécessite aucune bibliothèque.

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

Probablement pas très élégant, mais il y a plus d'une façon d'écorcher un chat! (Ou un lapin , si ce n'est pas ton truc!)

Ceci utilise jQuery pour manipuler document.styleSheets :

$.each($.grep(document.styleSheets, function(n) {
    return n.href.search(/searchRegex/) != -1;
}), function(i, n) {
    n.disabled = true;
});

Cela désactivera toute feuille de style contenant "searchRegex" dans l'URL. (Voir str.search() et expressions régulières .)

Il est facile de changer cela en JavaScript pur. Supprimer $.each() et $.grep() en faveur d'un simple for-loop :

for (var i = 0; i < document.styleSheets.length; i++) {
    if (document.styleSheets[i].href.search(/searchRegex/) != -1) {
        document.styleSheets[i].disabled = true;
    }
}
3
Damien Ó Ceallaigh

Cela réinitialisera le style de votre page en supprimant tous les éléments de style. De plus, jQuery n'est pas requis.

Array.prototype.forEach.call(document.querySelectorAll('style,[rel="stylesheet"],[type="text/css"]'), function(element){
  try{
    element.parentNode.removeChild(element)
  }catch(err){}
});
1
user257319

Ceci est pour désactiver tout <style> à partir de HTML

// this disable all style of the website...
var cant = document.styleSheets.length
for(var i=0;i<cant;i++){
    document.styleSheets[i].disabled=true;
}

//this is the same disable all stylesheets
Array.prototype.forEach.call(document.styleSheets, function(element){
  try{
    element.disabled = true;
  }catch(err){}
});
0
DarckBlezzer

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

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

("$ =" à trouver à la fin de href)

0
eon