表示状態（スタイルシート）を簡単に一気に変える方法を思いついた。

JavaScript

例えばAjaxなどを使って webアプリを作っている時に、表示状態を切り替えたい時がある。
今までの方式は、スクリプトで対象の要素を集めて此処に（非）表示などを行っていた。それは面倒だった。
一気に切り替える方法はないものだろうか？考えた。
cssText は、考えていない。（スクリプトの中にスタイルを書きたくないから）


すぐに思いつくなら

  <link rel="stylesheet" type="text/css" media-"screen" id="A" href="mode_a.css">
  <link rel="stylesheet" type="text/css" media="screen" id="B" href="mode_b.css" disabled="true">
  <link rel="stylesheet" type="text/css" media="screen" id="C" href="mode_c.css" disabled="true">

こんなhead要素のスタイルシートだけを集めて、対象のものを有効(false)にすれば良い

  let target = "C";
  Array.from (document.querySelectorAll ('link[rel="stylesheet"]'))
       .forEach (link => link.disabled = link.id != target);

試してないけどこんな感じ？
しかし、将来的にphpにより読み込まなければならないファイルの空白やらコメントなどを削除して1つのHTMLファイルだけとして扱いたいという要求が出てくるはずだ。その時にどうするか？
（style要素にもdisabledを指定できることをこの件で知った。それでも可能か！？）

悩んだ挙句、ふとひらめいた！
それで以下のようにすることにした。

<!DOCTYPE hrml>
<head>
  <meta charset="utf-8">
  <title>表示モードによってスタイルしーとを切り替える</title>

<style>
  body.a section#A { display: block !important; }
  body.a section#B { display: none  !important; }
  body.a section#C { display: none  !important; }

  body.b section#A { display: none  !important; }
  body.b section#B { display: block !important; }
  body.b section#C { display: none  !important; }

  body.c section#A { display: none  !important; }
  body.c section#B { display: none  !important; }
  body.c section#C { display: block !important; }

</style>


<body class="a">
<h1>表示モードを切り替える</h1>
<p>
  <select onchange="document.body.className=this.value">
    <option value="a">A mode
    <option value="b">B mode
    <option value="c">C mode
  </select>
</p>

<section id="A">
  <h2>表示モードA</h2>
</section>

<section id="B">
  <h2>表示モードB</h2>
</section>

<section id="C">
  <h2>表示モードC</h2>
</section>

結局やっていることは document.body.className に文字列を代入するだけ。
スタイルシートの各設定値に !important が必須なことと、
大元の(body)要素にクラス名を指定すること。


（古典的だけど）使えそうだ。