クリックしてソースを変更または切り替える

Question

ウェブサイトのテーマを切り替えるボタンがあることを計画しています。私はここで検索してきましたが、喜びはありません。クリック機能を使用して、文書の先頭タグからCSSリンクを変更または切り替えることはできますか？私はどこから始めるべきか、それが可能かどうかわかりません。お知らせ下さい。

例ボタン：

フォルダで準備テーマ.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

、あなたはのlocalStorage /クッキーに格納するテーマ名や.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>