点击

Question

我计划有一个按钮来切换网站主题。我一直在这里寻找但没有快乐。是否可以通过使用单击功能更改或切换文档头标记中的css链接？我不知道从哪里开始或者它是否可能。让我知道。

示例按钮：

<button type="button" class="floater btn btn-primary" title="Click to change theme"><i class="fa fa-cog"></i></button>

Answer 1

The idea is to disable the current style and load the new css file.
//Head
<link rel="stylesheet" href="style1.css" id="style1" />
//head
//body
<button type="button" id="addCss" class="floater btn btn-primary" title="Click to change theme"><i class="fa fa-cog"></i></button>   

$(document).ready(function() {
  $("#addCss").click(function() {
   $("#style1").attr("disabled", "disabled");
  $("head").append("<link>");
  var css = $("head").children(":last");
  css.attr({
   rel:  "stylesheet",
   type: "text/css",
   href: "css-file-path"
  });   
 });
});

Answer 2

假设您在文件夹中准备好主题.css文件，您可以尝试在localstorage / cookie中存储主题名称或.css文件名，然后重新加载页面并检索.css主题。

以下代码可能有所帮助。我正在使用以下代码为我的项目基于剑道主题。

<强> HTML

 <ul class="dropdown-menu thememenu">
      <li><a href="#" data-css-name="kendo.bootstrap.min">Bootstrap</a></li>
      <li><a href="#" data-css-name="kendo.blueopal.min">Blueopal</a></li>
      <li><a href="#" data-css-name="kendo.metro.min">Metro</a></li>
      <li><a href="#" data-css-name="kendo.black.min">Black</a></li>
      <li><a href="#" data-css-name="kendo.flat.min">Flat</a></li>
      <li><a href="#" data-css-name="kendo.material.min">Material</a></li>
      <li><a href="#" data-css-name="kendo.materialblack.min">Material Black</a></li>
      <li><a href="#" data-css-name="kendo.uniform.min">Uniform</a></li>
      <li><a href="#" data-css-name="kendo.silver.min">Silver</a></li>

</ul>

<强> JS

    var theme = {

        changeTheme: function () {
            var selected = $(this).data("css-name");
            localStorage.setItem("theme-kendo", selected);
            window.location.reload();
        },

        loadTheme: function () {
            var theme = localStorage.getItem("theme-kendo");
            var css = $('link[href*="/Content/kendo/"]')[1];  //get my css anchor
            css.href = '/Content/kendo/' + theme + '.css';
        }
    };


    $(function () {
        theme.loadTheme();
        $('.thememenu a').on('click', theme.changeTheme);

    });

Answer 3

这可能对您有所帮助

<link id="pagestyle" rel="stylesheet" type="text/css" href="default.css">

<script>
function swapStyleSheet(sheet){
    document.getElementById('pagestyle').setAttribute('href', sheet);
}
</script>
<button onclick="swapStyleSheet('./css/red.css')">Red Style Sheet</button>
<button onclick="swapStyleSheet('./css/green.css')">Green Style Sheet</button>