jQuery – habilita / deshabilita todas las hojas de estilo en la página al hacer clic

¿Es posible detectar todas las hojas de estilo en la página actual con un clic en el botón ‘deshabilitar / habilitar CSS’ y deshabilitarlas en el primer clic para que no se aplique ninguno de los estilos y luego restaurarlas una vez más al segundo clic? ¿Alguna idea de cómo sería la jQuery, si es posible?

$('link[rel="stylesheet"]').attr('disabled', 'disabled'); 

esto debería deshabilitarlos a todos, luego lo contrario para poderlos volver a activar:

 $('link[rel="stylesheet"]').removeAttr('disabled'); 

Para deshabilitar todas las hojas de estilo:

 $('link[rel~="stylesheet"]').prop('disabled', true); 

Para volver a habilitar todas las hojas de estilo:

 $('link[rel~="stylesheet"]').prop('disabled', false); 

Utilizo el selector de atributo ~= aquí en lugar de = para que el selector aún funcione con hojas de estilo donde el atributo rel es alternate stylesheet , no solo stylesheet .

Además, es importante usar .prop , no .attr . Si usa .attr , el código no funcionará en Firefox. Esto se debe a que, según MDN , disabled es una propiedad del objeto DOM HTMLLinkElement , pero no un atributo del elemento HTML de link . El uso de disabled como atributo de HTML no es estándar.

 $('link[rel=stylesheet][href~="somelink.com"]').attr('disabled', 'true'); 

Este es un ejemplo aproximado que se basa en asignar una identificación a un estilo y luego eliminarla y restaurarla utilizando una variable.

HTML

  
Something
Click to Remove
Click to Restore

Javascript

 var css = $("#test"); $("#remove").click(function(){ css.remove(); }); $("#restre").click(function(){ $("head").append(css); }); 

Ejemplo de trabajo http://jsfiddle.net/Fwhak/

Encontré lo que encontré, lo siguiente funcionó en todos los navegadores para mí:

 CSS Link:  JQuery: $('link[data-role="baseline"]').attr('href', ''); 

Lo anterior deshabilitará solo esa hoja de estilo, y esto podría activarse y desactivarse.

Aquí hay otro método que puedes tratar de hacer esa cosa.

 $('*[rel=stylesheet]').attr('disabled', 'true'); $('link[rel=stylesheet]').attr('disabled', 'true'); 

y en otra parte eliminas ese atributo.

 $('link[rel=stylesheet]').attr('disabled', 'false'); $('*[rel=stylesheet]').attr('disabled', 'false');