it-swarm.com.de

So entfernen Sie ein Stylesheet dynamisch von der aktuellen Seite

Gibt es eine Möglichkeit, das aktuelle Stylesheet dynamisch von der Seite zu entfernen?

Wenn zum Beispiel eine Seite enthält:

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

... gibt es eine Möglichkeit, sie später mit JavaScript zu deaktivieren? Zusätzliche Punkte für die Verwendung von jQuery.

37
Nathan Osman

Vorausgesetzt, Sie können es mit jQuery anvisieren, sollte es genauso einfach sein wie remove() für das Element:

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

Dadurch werden alle externe Stylesheets auf der Seite entfernt. Wenn Sie einen Teil der URL kennen, können Sie nur den URL entfernen, nach dem Sie suchen:

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

Und in Javascript

dies ist ein Beispiel für das Entfernen aller Objekte mit dem Abfrageselektor und dem foreach-Array

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

Wenn Sie die ID des Stylesheets kennen, verwenden Sie Folgendes. Natürlich funktioniert auch jede andere Methode, um das Stylesheet zu erhalten. Dies ist ein reines DOM und erfordert keine Bibliotheken.

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

Ich habe diese Seite gefunden, als ich nach einer Möglichkeit gesucht habe, Stylesheets mit jquery zu entfernen. Ich dachte, ich hätte die richtige Antwort gefunden, als ich Folgendes las

Wenn Sie einen Teil der URL kennen, können Sie nur die URL entfernen, nach der Sie suchen: $('link[rel=stylesheet][href~="foo.com"]').remove();"

Ich mochte diese Lösung, weil die Stylesheets, die ich entfernen wollte, denselben Namen hatten, sich jedoch in verschiedenen Ordnern befanden. Da dieser Code jedoch nicht funktioniert hat, habe ich den Operator in *= Geändert und er funktioniert einwandfrei:

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

Ich dachte nur, ich würde das teilen, falls es für jemanden nützlich ist.

8
user5936810

Wahrscheinlich nicht sehr elegant, aber es gibt mehr als eine Möglichkeit, eine Katze zu enthäuten! (Oder ein Kaninchen , wenn das nicht deine Sache ist!)

Dies verwendet jQuery, um document.styleSheets zu bearbeiten:

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

Dadurch wird jedes Stylesheet deaktiviert, das "searchRegex" in der URL enthält. (Siehe str.search() und reguläre Ausdrücke .)

Es ist leicht, dies als reines JavaScript zu ändern. Entfernen Sie $.each() und $.grep() zugunsten einer einfachen 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

Dies setzt das Styling Ihrer Seite zurück und entfernt alle Stilelemente. Auch jQuery ist nicht erforderlich.

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

Dies ist für die Deaktivierung aller <style> von 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

Niemand hat das Entfernen eines bestimmten Stylesheets ohne ID in normalem Javascript erwähnt:

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

("$ =" am Ende von href finden)

0
eon