通过单选按钮更改样式表

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>JSvar 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 = ()=>{

  document.getElementById("siteTheme").href = light.value;

}