jQuery - attiva/disattiva tutti i fogli di stile sulla pagina al clic

Question

E 'possibile rilevare tutti i fogli di stile sulla pagina corrente con un clic di un pulsante' disable/enable CSS 'e disabilitarli al primo clic in modo che nessuno dei si applica lo stile e quindi ripristinarli di nuovo al secondo clic? Qualche idea su come sarebbe il jQuery, se è possibile?

Answer 1

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

questo dovrebbe disabilitare tutti loro, poi l'opposto renable loro:

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

Answer 2

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

Answer 3

Ecco un esempio grezzo che si basa sull'assegnazione di un id di uno stile e poi rimuovendo e ripristinando usando una variabile.

HTML

<style id="test"> 
.test{ 
    background: red; 
    width: 100px; 
    height: 100px; 
} 
</style> 
<div class="test">Something</div> 
<div id="remove">Click to Remove</div> 
<div id="restore">Click to Restore</div> 

Javascript

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

$("#restore").click(function(){ 
    $("head").append(css); 
}); 

Esempio di lavorohttp://jsfiddle.net/Fwhak/

Answer 4

Per disabilitare tutti i fogli di stile:

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

Per riattivare tutti i fogli di stile:

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

Io uso the ~= attribute selector qui invece = modo che il selettore continuerà a funzionare con fogli di stile in cui l'attributo rel è alternate stylesheet, non solo stylesheet.

Inoltre, è importante utilizzare .prop, non .attr. Se si utilizza .attr, il codice non funzionerà in Firefox. Questo perché, according to MDN, disabled è un property of the HTMLLinkElement DOM object, ma non un attributo dell'elemento HTML link. L'utilizzo di disabled come attributo HTML non è standard.

Answer 5

ho trovato il trovato il seguente lavorato in tutti i browser per me:

CSS Link: 
<link rel="stylesheet" href="http://basehold.it/22" data-role="baseline"> 

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

Quanto sopra disabilitare solo quella foglio di stile, e questo potrebbe essere attivata e disattivata.

Answer 6

Ecco un altro metodo che puoi provare a fare quella cosa.

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

e in altra parte si rimuove l'attributo

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