web-dev-qa-db-ja.com

jQuery –クリック時にページ上のすべてのスタイルシートを有効/無効にします

「CSSの無効化/有効化」ボタンをクリックして現在のページのすべてのスタイルシートを検出し、最初のクリックでそれらを無効にして、スタイルが適用されないようにし、2回目のクリックでもう一度復元することは可能ですか？可能であれば、jQueryがどのように見えるかについて何か考えはありますか？

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

これですべてが無効になり、反対にテーマが有効になります。

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

すべてのスタイルシートを無効にするには：

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

すべてのスタイルシートを再度有効にするには：

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

~=の代わりに =属性セレクター を使用しているので、セレクターはrel属性が alternate stylesheet 、stylesheetだけではありません。

また、 .prop ではなく .attr を使用することが重要です。 .attrを使用すると、Firefoxではコードが機能しません。これは、 MDNによると 、disabledは HTMLLinkElement DOMオブジェクトのプロパティ であるが、notlinkHTML要素の属性。 HTML属性としてdisabledを使用することは非標準です。

8
Rory O'Kane
$('link[rel=stylesheet][href~="somelink.com"]').attr('disabled', 'true');
2
What have you tried

これは、スタイルにIDを割り当て、変数を使用してそれを削除および復元することに依存する大まかな例です。

[〜＃〜] 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);
});

実例http://jsfiddle.net/Fwhak/

0
Kevin Bowersox

私は、次のことがすべてのブラウザで機能することを発見しました。

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

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

上記はその1つのスタイルシートのみを無効にし、これはオンとオフを切り替えることができます。

0
Alex

これがあなたがそのことを試みることができるもう一つの方法です。

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

一方、あなたはその属性を削除します

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