javascript - 用于切换 css 模板 Bootstrap 的按钮

Question

我已经搜索过许多不同的方法来在不同的级联样式表之间切换，但都无法正常工作。我希望能够有一个太阳按钮链接到默认样式表和月亮按钮链接到深色样式表。下面是我链接样式表的代码片段和我想链接到这些样式表的按钮。

我知道有很多这样的问题，但我已经尝试了所有这些问题，但没有让它们起作用。

提前谢谢你。

    <!-- Template Stylesheets -->
<link href="../assets/css/template/template.css" rel="stylesheet" 
type="text/css" id="default">
<link href="../assets/css/template/template2.css" rel="alternate stylesheet" 
type="text/css" id="dark">
<link href="../assets/css/template/bootstrap.min.css" rel="stylesheet">
<link href="../assets/css/template/navigation.css" rel="stylesheet">

<link id="pagestyle" rel="stylesheet" type="text/css" href="template.css">
<script type="text/javascript">
function swapStyleSheet(template){
document.getElementById('pagestyle').setAttribute('href', template);
}
</script>


    <!-- Buttons in body to Switch -->
<li class="nav-item">
<a onclick="swapStyleSheet('template.css')" class="nav-link" href="#"><span data-feather="sun"></span></a>
</li>
<li class="nav-item">
<a onclick="swapStyleSheet('template2.css')" class="nav-link" href="#"><span data-feather="moon"></span></a>
</li>

Answer 1

function changeCSS(cssFile, cssLinkIndex) {

  var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);

  var newlink = document.createElement("link");
  newlink.setAttribute("rel", "stylesheet");
  newlink.setAttribute("type", "text/css");
  newlink.setAttribute("href", cssFile);

  document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
}

<a href="#" onclick="changeCSS('template.css', 0);">STYLE 1</a>
<a href="#" onclick="changeCSS('template2.css', 0);">STYLE 2</a>