Comment supprimer dynamiquement une feuille de style de la page en cours
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 plus tard avec JavaScript? Points supplémentaires pour l'utilisation de jQuery.
8 réponses
Eh 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();
Cela supprimera Toutes 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 le sélecteur de requête et le 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]);
}
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 un DOM direct et ne nécessite pas d'utiliser de bibliothèques.
var sheet = document.getElementById(styleSheetId);
sheet.disabled = true;
sheet.parentNode.removeChild(sheet);
J'ai trouvé cette page tout 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, alors vous pouvez supprimer celui que vous cherchez:
$('link[rel=stylesheet][href~="foo.com"]').remove();"
J'ai aimé cette solution parce que les feuilles de style que je voulais supprimer avaient le même nom mais étaient dans des dossiers différents. Cependant, ce code n'a pas fonctionné, j'ai donc changé l'opérateur en *= et cela fonctionne parfaitement:
$('link[rel=stylesheet][href*="mystyle"]').remove();
Juste pensé que je partagerais cela au cas où c'est utile pour quelqu'un.
Probablement pas très élégant, mais il y a plus d'une façon de peler un chat! (Ou un lapin, si ce n'est pas votre truc!)
Il 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 pour être du JavaScript pur. Supprimer $.each() 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;
}
}
Cela mettra à zéro votre page, en supprimant tous les éléments de style. en outre, 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){}
});
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){}
});
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()
("$=" pour trouver à la fin de href)
Supposons que vous voulez supprimer une classe myCssClass alors le moyen le plus facile de le faire est element.classList.supprimer ("myCssClass");