2013-04-05 2 views
11

पर पृष्ठ पर सभी स्टाइल शीट को सक्षम/अक्षम करें क्या वर्तमान पृष्ठ पर 'अक्षम/सक्षम सीएसएस' बटन के क्लिक के साथ सभी स्टाइल शीट का पता लगाना संभव है और उन्हें पहले क्लिक पर अक्षम करें ताकि इनमें से कोई भी स्टाइल लागू होता है, और फिर उन्हें एक बार फिर से दूसरे क्लिक पर पुनर्स्थापित करें? किसी भी विचार से jQuery क्या दिखता है, अगर यह संभव है?jQuery -

+0

वहाँ एक व्यावहारिक अनुप्रयोग यहाँ है निकालना चाहते हैं? – user113215

+0

@ user113215 बस यह जानना चाहते हैं कि यह संभव था :) – Maverick

उत्तर

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

इस सब के सब को अक्षम करना चाहिए, फिर उन्हें renable के विपरीत:

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

[jsfiddle डेमो] (http://jsfiddle.net/pxfunc/XwMCU/1/) – MikeM

+0

लघु और मीठा। बहुत अच्छा काम करता है। धन्यवाद MaxOvrdrv! – Maverick

+0

@mdmullinax आपका पहेली बटन क्लिक पर काम नहीं कर रहा है! – Maverick

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

यहाँ एक किसी न किसी उदाहरण है कि एक शैली के लिए एक आईडी बताए और फिर दूर करने और बहाल करने पर निर्भर करता है यह एक चर का उपयोग कर रहा है।

एचटीएमएल

<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> 

जावास्क्रिप्ट

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

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

कार्य उदाहरणhttp://jsfiddle.net/Fwhak/

8

सभी स्टाइलशीट अक्षम करने के लिए:

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

सभी स्टाइलशीट को पुनः चालू करने:

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

मैं the ~= attribute selector= के बजाय यहाँ का उपयोग करें ताकि चयनकर्ता अभी भी शैली के साथ काम करेंगे जहां rel विशेषता, alternate stylesheet है सिर्फ stylesheet नहीं।

इसके अलावा, .prop का उपयोग करना महत्वपूर्ण है, .attr नहीं। यदि आप .attr का उपयोग करते हैं, तो कोड फ़ायरफ़ॉक्स में काम नहीं करेगा। ऐसा इसलिए है क्योंकि, according to MDN, disabledproperty of the HTMLLinkElement DOM object है, लेकिन link HTML तत्व की विशेषता है। एक HTML विशेषता के रूप में disabled का उपयोग गैर मानक है।

0

मैंने पाया पाया सभी ब्राउज़रों में मेरे लिए काम किया है:

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

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

ऊपर केवल उसी एक स्टाइलशीट को निष्क्रिय कर देगा, और यह चालू और बंद टॉगल किया जा सकता है।

0

यहां एक और तरीका है जिसे आप उस काम को करने का प्रयास कर सकते हैं।

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

और दूसरे हाथ में आपको लगता है कि विशेषता

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