jQuery - włącz/wyłącz wszystkie arkusze stylów na stronie po kliknięciu

Question

Czy możliwe jest wykrycie wszystkich arkuszy stylów na bieżącej stronie za pomocą kliknięcia przycisku "wyłącz/włącz CSS" i wyłączenie ich za pierwszym kliknięciem, aby żadna z opcji ma zastosowanie stylizacja, a następnie przywrócić je po drugim kliknięciu? Masz pomysł, jak będzie wyglądać jQuery, jeśli to możliwe?

Answer 1

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

ten powinien wyłączyć wszystkie z nich, wówczas naprzeciw renable je:

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

Answer 2

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

Answer 3

Tutaj jest szorstka przykład, który opiera się na przypisanie identyfikatora do stylu, a następnie usuwanie i przywracanie używając zmiennej.

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); 
}); 

Przykład roboczyhttp://jsfiddle.net/Fwhak/

Answer 4

Aby wyłączyć wszystkie arkusze stylów:

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

Aby ponownie włączyć wszystkie arkusze stylów:

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

używam the ~= attribute selector tutaj zamiast = tak, że selektor będzie nadal działać z arkuszy stylów, gdzie atrybut rel jest alternate stylesheet, nie tylko stylesheet.

Ponadto ważne jest użycie .prop, a nie .attr. Jeśli użyjesz .attr, kod nie będzie działał w Firefoksie. Jest tak dlatego, ponieważ according to MDN,, ale nie są to atrybuty elementu HTML. Używanie disabled jako atrybutu HTML jest niestandardowe.

Answer 5

znalazłem stwierdzili, że następujące pracował we wszystkich przeglądarkach dla mnie:

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

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

Powyższe spowoduje wyłączenie tylko jednego arkusza stylów, a to może być włączany i wyłączany.

Answer 6

Oto kolejna metoda, którą możesz spróbować zrobić.

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

aw drugiej strony usunięcie tego atrybutu

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