cssファイルを読みこまなくするスクリプトありますでしょうか？

Question

headタグ何に記載されている、下記のmain.cssファイルを読みこまなくする方法ってありますか？

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

試したこと

<link rel="stylesheet" style="display:none;" type="text/css" href="/css/main.css">

メルマガシステムのフォーム作成ページに強引に埋めこもうとしておりまして。。。
そうするとデフォルトでmain.cssを読み込んでおり、これをなんとか読み込まないようにしたいんですが、jsなどでなんとかならないものでしょうか？

Answer 1

akkkkinさんの試された style="display:none;" を埋め込んだところに下記の記述をすることで、main.css が適用されなくなります。

<link rel="stylesheet" media="screen and (max-width: 0px)" type="text/css" href="/css/main.css">

HTMLの構文として推奨できるものではありませんが、無効なメディアクエリを指定することで main.css が適用されなくなります。

main.css を読み込む必要が全くないのであれば、システム(?)上で <link> タグ自体を削除する設定を探されたほうが、不要なリクエストが発生しないので良いかと思います。

また、どうしても読み込まれてしまう CSS に対しては、より詳細度の高い CSS で上書きをして対処をするのが一般的かと思います。

参考になれば幸いです。

Answer 2

モダンブラウザなら下記のようにすれば。ようするに要素を消してしまえばよいです。

document.querySelectorAll('[rel="stylesheet"]').forEach(e=>{e.remove();});

Comments

[akkkkin]

ありがとうございます。上記のスクリプトでmain.cssファイルを指す命令を記述すると、
document.querySelectorAll('[rel="stylesheet"]').forEach(e=>{e.remove(main.css);});
でいいのでしょうか？

[kei344]

違います。querySelectorでmain.cssを探して.remove()です。スタイルシートがmain.cssで終わるURLなら（?2017みたいなパラメータが無いなら）下記のようになると思います。

document.querySelector('[rel="stylesheet"][foo$="main.css"]').remove();

[akkkkin]

回答ありがとうござます。
<script>
document.querySelector('[rel="stylesheet"][foo$="main.css"]').remove();
</script>

でいいのでしょうか？

[kei344]

> でいいのでしょうか？
試せる環境はこちらには提示されていません。ご自身で試してください。

fooではなくhrefですが、
document.querySelector('[rel="stylesheet"][href$="main.css"]').remove();
でmain.cssのものを削除できていることは確認済みです。

[akkkkin]

返信遅くなり申し訳ありません。ありがとうございます！

Answer 3

HTMLが制御できるなら出力しなければいいような気もしますが。

<link rel="stylesheet" type="text/css" href="/css/main.css" disabled>

https://developer.mozilla.org/ja/docs/Web/API/HTMLLinkElement

JavaScriptでするなら

document.querySelectorAll('link[rel="stylesheet"]').forEach(element => element.disabled = true);

style要素も？

for (let i = 0; i < document.styleSheets.length; i++) {
  document.styleSheets[i].disabled = true;
}

https://developer.mozilla.org/ja/docs/Web/API/Document/styleSheets