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

Est-il un moyen de supprimer dynamiquement le courant de la feuille de style à partir de la page?

Par exemple, si une page contient:

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

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

InformationsquelleAutor Nathan Osman | 2011-02-17
  1. 61

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

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

    Qui va supprimer tous des feuilles de style externes sur la page. Si vous connaissez une partie de l'url, alors vous pouvez supprimer celui que vous cherchez:

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

    Et en Javascript

    ceci est un exemple de supprimer tous les avec la requête de sélection et le foreach tableau

    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]);
}
    • [facepalm] j'ai totalement oublié le sélecteur d'attributs.
    • =) pourrait vouloir consulter cette page: api.jquery.com/category/selectors
    • J'ai fait exactement ce pour changer de feuille de style avant. +1
    • Selon cette question, juste en retrait de la link élément n'est pas suffisant. Vous devriez le faire disabled tout d'abord, avec .prop('disabled', true). S'il est possible que les navigateurs ont changé depuis que la question a été écrit (2010), et vous n'avez pas besoin de désactiver le link.
    • FWIW Rory, je viens d'ouvrir les DevTools panneau en Chrome et sélectionné la feuille de style de lien pour cette page et pressé de supprimer et de tout le style s'en alla. Je suppose que c'est possible de Chrome est en train de faire quelque chose de spécial, casey, mais j'en doute.
    • .remove() ne semble pas influer sur la page, voir binternet.co.il/formulaire de contact et cliquez sur rtl deux fois sur le bouton, son coincé sur RTL...aucune idée pourquoi?
    • Mec, vous avez fait ma journée!! Merci beaucoup!!

    InformationsquelleAutor Brian Donovan
  2. 21

    Si vous connaissez l'ID de la feuille de style, utilisez la commande suivante. Toute autre méthode pour obtenir la feuille de style fonctionne aussi bien, bien sûr. Il s'agit de droite DOM et ne nécessite pas l'utilisation de tout bibliothèques.

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

    J'ai trouvé cette page, tandis que la recherche d'un moyen de supprimer les feuilles de style à l'aide de jquery. Je pensais avoir trouvé la bonne réponse quand j'ai lu la suite

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

    J'ai aimé cette solution, car les feuilles de style que j'ai voulu supprimer avaient le même nom, mais dans les différents dossiers. Toutefois, ce code ne fonctionne pas alors j'ai changé l'opérateur de *= et il fonctionne parfaitement:

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

    Juste pensé que je devais partager ce dans le cas où c'est utile pour quelqu'un.

    InformationsquelleAutor user5936810
  4. 3

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

    Ce utilise jQuery pour manipuler document.les feuilles de style:

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

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

    Il est facile de changer ce pur JavaScript. Supprimer $.chacun() et $.grep() en faveur d'une simple pour la boucle:

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

    Ceci permet de réinitialiser votre page de style, de supprimer tous les style-éléments. Aussi, jQuery n'est pas nécessaire.

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

    C'est pour désactiver tous les <style> 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){}
});
    InformationsquelleAutor DarckBlezzer
  7. 0

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

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

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

    InformationsquelleAutor eon
  8. -3

    Supposons que vous souhaitez supprimer une classe myCssClass alors plus facile de le faire est de l'élément.classList.supprimer("myCssClass");

    InformationsquelleAutor AtashG79