通过单选按钮更改样式表

Question

我正在尝试使用一个单选按钮，它会根据加载的 CSS 文件更改我网站的主题（颜色）。我希望它实时显示更改，提交按钮用于稍后保存更改。

HTML（头部）

<link rel="stylesheet" id="siteTheme" href="/sitefiles/theme/light.css">

HTML（正文）

<form action="#" method="POST">

  <div class="row">

    <div class="col-md-2">

      <h2>Shading</h2>

      <div style="margin-bottom: 1px;">

        <input type="radio" name="colorscheme" id="1" value="1">

        <label>Light</label>

      </div>

      <div style="margin-bottom: 1px;">

        <input type="radio" name="colorscheme" id="2" value="2">

        <label>Dark</label>

      </div>

      <div style="margin-bottom: 1px;">

        <input type="radio" name="colorscheme" id="3" value="3">

        <label>Fairy</label>

      </div>

    </div>

    <div class="row">

      <div class="col-md-12">

        <br/>

        <center>

          <span><input type="submit" class="btn btn-primary" value="Submit" name="submit"></span>

        </center>

      </div>

    </div>

  </div>

</form>

JS

var checkedButton1 = document.getElementById('1');

var checkedButton2 = document.getElementById('2');

var checkedButton3 = document.getElementById('3');

var light = "/sitefiles/theme/light.css";

var dark = "/sitefiles/theme/dark.css";

var fairy = "/sitefiles/theme/fairy.css";

checkedButton1.onclick = document.getElementById("siteTheme").setAttribute('href', light.value);

checkedButton2.onclick = document.getElementById("siteTheme").setAttribute('href', dark.value);

checkedButton3.onclick = document.getElementById("siteTheme").setAttribute('href', fairy.value);

单击按钮时我没有任何反应，它实际上是从页面“卸载”模板？

Answer 1

您需要将函数分配给 onclick 属性。另请注意，字符串没有 value 属性。checkedButton1.onclick = ()=> document.getElementById("siteTheme").setAttribute('href', light);checkedButton2.onclick = ()=> document.getElementById("siteTheme").setAttribute('href', dark);checkedButton3.onclick = ()=> document.getElementById("siteTheme").setAttribute('href', fairy);

Answer 2

尝试在函数中传递它var checkedButton1 = document.getElementById('1');checkedButton1.onclick = ()=>{&nbsp; document.getElementById("siteTheme").href = light.value;}