Jak dynamicznie usunąć arkusz stylów z bieżącej strony

Jeśli znasz identyfikator arkusza stylów, użyj poniższego. Oczywiście działa również każda inna metoda uzyskania arkusza stylów. Jest to prosty DOM i nie wymaga używania żadnych bibliotek.

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

Znalazłem tę stronę, szukając sposobu na usunięcie arkuszy stylów za pomocą jquery. Myślałem, że znalazłem właściwą odpowiedź, gdy przeczytałem następujące

Jeśli znasz część adresu url, możesz usunąć tylko ten, którego szukasz: $('link[rel=stylesheet][href~="foo.com"]').remove();"

Podobało mi się to rozwiązanie, ponieważ arkusze stylów, które chciałem usunąć, miały tę samą nazwę, ale znajdowały się w różnych folderach. Jednak ten kod nie dziaĹ 'aĹ', wiÄ ™ c zmieniĹ 'em operator na *= i dziaĹ' a doskonale:

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

Prawdopodobnie niezbyt eleganckie, ale jest więcej niż jeden sposób, aby oskórować kota! (Lub królik , jeśli to nie twoja sprawa!)

Używa jQuery do manipulowania document.styleSheets:

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

Spowoduje to wyłączenie arkusza stylów zawierającego "searchRegex" w adresie URL. (Patrz str.search() oraz wyrażenia regularne.)

Łatwo jest zmienić to na czysty JavaScript. Usunąć $.each() oraz $.grep() na rzecz prostego for-loop :

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

_{^{spowoduje to} zerowanie strony, usunięcie wszystkich elementów stylu. również jQuery nie jest wymagane .}

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

To służy do wyłączania wszystkich <style> z 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){}
});

Nikt nie wspomniał o usuwaniu określonego arkusza stylów bez identyfikatora w prostym Javascript:

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

("$=" aby znaleźć na końcu href)

Załóżmy, że chcesz usunąć klasę myCssClass, to najprostszym sposobem na to jest element.lista klas.remove ("myCssClass");