web-dev-qa-db-ja.com

現在のページからスタイルシートを動的に削除する方法

ページから現在のスタイルシートを動的に削除する方法はありますか？

たとえば、ページに次が含まれている場合：

<link rel="stylesheet" type="text/css" href="http://..." />

...後でJavaScriptで無効にする方法はありますか？ jQueryを使用するための追加のポイント。

javascriptjquerycssstylesheet
41
Nathan Osman

JQueryを使用してターゲットにできると仮定すると、要素でremove()を呼び出すのと同じくらい簡単になります。

$('link[rel=stylesheet]').remove();

これにより、ページ上のall外部スタイルシートが削除されます。 URLの一部がわかっている場合は、探しているURLのみを削除できます。

$('link[rel=stylesheet][href~="foo.com"]').remove();

そしてJavascriptで

これは、クエリセレクターとforeach配列ですべてを削除する例です

Array.prototype.forEach.call(document.querySelectorAll('link[rel=stylesheet]'), function(element){
      try{
        element.parentNode.removeChild(element);
      }catch(err){}
    });

//or this is similar
var elements = document.querySelectorAll('link[rel=stylesheet]');
for(var i=0;i<elements.length;i++){
    elements[i].parentNode.removeChild(elements[i]);
}
61
Brian Donovan

スタイルシートのIDがわかっている場合は、次を使用します。もちろん、スタイルシートを取得する他の方法も同様に機能します。これは単純なDOMであり、ライブラリを使用する必要はありません。

var sheet = document.getElementById(styleSheetId);
sheet.disabled = true;
sheet.parentNode.removeChild(sheet);
21
Sir Robert

Jqueryを使用してスタイルシートを削除する方法を探しているときに、このページを見つけました。次を読んだときに正しい答えを見つけたと思った

URLの一部がわかっている場合は、探しているものだけを削除できます：$('link[rel=stylesheet][href~="foo.com"]').remove();"

削除したいスタイルシートの名前は同じでしたが、異なるフォルダーにあったため、このソリューションが気に入りました。ただし、このコードは機能しなかったため、演算子を*=に変更しましたが、完全に機能します。

$('link[rel=stylesheet][href*="mystyle"]').remove();

誰かに役立つ場合に備えて、これを共有すると思いました。

8
user5936810

おそらくあまりエレガントではありませんが、猫の皮を剥ぐ方法は複数あります！ （または ウサギ 、それがあなたのものでない場合！）

これはjQueryを使用して _document.styleSheets_ を操作します。

_$.each($.grep(document.styleSheets, function(n) {
    return n.href.search(/searchRegex/) != -1;
}), function(i, n) {
    n.disabled = true;
});
_

これにより、URLに「searchRegex」を含むスタイルシートが無効になります。 （ str.search() および 正規表現 を参照）

これを純粋なJavaScriptに変更するのは簡単です。 $.each() および $.grep() を削除して、単純な for-loop を優先します。

_for (var i = 0; i < document.styleSheets.length; i++) {
    if (document.styleSheets[i].href.search(/searchRegex/) != -1) {
        document.styleSheets[i].disabled = true;
    }
}
_
3
Damien Ó Ceallaigh

これにより、ページのスタイルがリセットされ、すべてのスタイル要素が削除されます。また、jQueryは必要ありません。

Array.prototype.forEach.call(document.querySelectorAll('style,[rel="stylesheet"],[type="text/css"]'), function(element){
  try{
    element.parentNode.removeChild(element)
  }catch(err){}
});
1
user257319

これはすべてを無効にするためです<style>からhtml

// this disable all style of the website...
var cant = document.styleSheets.length
for(var i=0;i<cant;i++){
    document.styleSheets[i].disabled=true;
}

//this is the same disable all stylesheets
Array.prototype.forEach.call(document.styleSheets, function(element){
  try{
    element.disabled = true;
  }catch(err){}
});
0
DarckBlezzer

プレーンなJavascriptでIDなしで特定のスタイルシートを削除することについて誰も言及していません。

 document.querySelector('link[href$="something.css"]').remove()

（ "$ ="はhrefの最後にあります）

0
eon