jQuery - bật/tắt tất cả các trang định dạng trên trang khi nhấp vào

Question

Có thể phát hiện tất cả các trang mẫu trên trang hiện tại bằng cách nhấp vào nút 'tắt/bật CSS' và tắt chúng trên nhấp chuột đầu tiên để không có kiểu dáng áp dụng, và sau đó khôi phục lại chúng một lần nữa trên nhấp chuột thứ hai? Bất kỳ ý tưởng nào về jQuery sẽ như thế nào, nếu có thể?

Answer 1

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

này nên vô hiệu hóa tất cả trong số họ, sau đó ngược lại để renable họ:

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

Answer 2

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

Answer 3

Dưới đây là một ví dụ thô dựa trên gán một id đến một phong cách và sau đó loại bỏ và khôi phục nó sử dụng một biến.

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

làm việc Ví dụhttp://jsfiddle.net/Fwhak/

Answer 4

Để vô hiệu hóa tất cả các stylesheets:

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

Để kích hoạt lại tất cả các stylesheets:

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

tôi sử dụng the ~= attribute selector đây thay vì = để chọn vẫn sẽ làm việc với stylesheets nơi thuộc tính rel là alternate stylesheet, không chỉ stylesheet.

Ngoài ra, điều quan trọng là sử dụng .prop, không phải .attr. Nếu bạn sử dụng .attr, mã sẽ không hoạt động trong Firefox. Điều này là do, according to MDN, disabled là property of the HTMLLinkElement DOM object, nhưng không thuộc tính của phần tử HTML link. Sử dụng disabled làm thuộc tính HTML không chuẩn.

Answer 5

Tôi tìm thấy tìm thấy sau đây làm việc trong tất cả các trình duyệt đối với tôi:

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

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

trên sẽ vô hiệu hóa duy nhất mà một kiểu, và điều này có thể được bật và tắt.

Answer 6

Đây là một phương pháp khác mà bạn có thể thử làm điều đó.

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

và trong tay khác mà bạn loại bỏ thuộc tính

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