jsを用いた同期するファイルの変更方法に関する質問

Question

jsを用いてhtmlとリンクするcssのファイルを変更したいと考えております。

具体的にはhtmlの写真の数をJavascriptで取得し、その数によってcssを使い分けたいと考えております。

該当のソースコード

<link rel="stylesheet" href="style.css">

<li><img src="img/犬.jpeg" id = "pic_1"alt="画像の説明" ></li>
<li><img src="img/ライオン.jpeg" id = "pic_2" alt="画像の説明" ></li>
<li><img src="img/猫.jpeg" id = "pic_3" alt="画像の説明"></li>  

この部分をliの数で場合分けしたいと考えており、1,2,3,4,5個での場合分けを行い最大5つのcssファイルを作成したいと思っております。そこでcssのパスを取得してそれをjsで書き換える方法を教えていただきたいです。よろしくお願いします。

試したこと

どうにかcssのパスを取得してそれをjsで書き換えて行いたいと考えておりますが、見当違いなことを行っているかもしれません、どうかアドバイスの方よろしくお願いします。

Comments

[Lhankor_Mhy]

やりたいことは伝わりました。
問題はなんでしょうか？

[yuyu]

cssのパスを取得してそれをjsで書き換える方法です。

[Lhankor_Mhy]

方法が全くわからないということですね。了解しました。

[int32_t]

数によってどのようにスタイルシートを変えたいのか具体的に教えてください。
cssのパスを書き換える、というのは普通はやりません。

Answer 1

ボタンをクリックするとスタイルが変更されるサンプルです。
cssファイルのパスが固定であれば参考になるかもしれません。

<link rel="stylesheet" href="./style1.css">

<button id="style1-button">STYLE1</button>

<button id="style2-button">STYLE2</button>

<script>
const style1Button = document.querySelector("#style1-button");
const style2Button = document.querySelector("#style2-button");

style1Button.addEventListener("click", (event) => {
  document.querySelector("link").href = "./style1.css";
});

style2Button.addEventListener("click", (event) => {
  document.querySelector("link").href = "./style2.css";
});
</script>