CSS切り替えスイッチ WebStorage保存
Javascript&CSS
初期設定のCSSを作っておきます。
<link id="setcss" type="text/css" rel="stylesheet" href="css/default.css" />
切替のJSも読み込み
<script type="text/javascript" src="setcss.js"></script>
その読み込むJS
function setcss() { var csskey = Number(localStorage.getItem("csstemp")); switch (csskey){ case 1: var style = '<link rel="stylesheet" href="css/default.css">'; $('head link:last').after(style); break; case 2: var style = '<link rel="stylesheet" href="css/change.css">'; $('head link:last').after(style); break; } } function cssswitch() { document.getElementById('horizon').onclick = function(){ localStorage.setItem("csstemp" , 1); var csskey = localStorage.getItem("csstemp"); if(csskey==1){ var style = '<link rel="stylesheet" href="css/default.css">'; $('head link:last').after(style); } else var style = '<link rel="stylesheet" href="css/default.css">'; $('head link:last').after(style); } document.getElementById('vertical').onclick = function(){ localStorage.setItem("csstemp" , 2); var csskey = localStorage.getItem("csstemp"); if(csskey==2){ var style = '<link rel="stylesheet" href="css/change.css">'; $('head link:last').after(style); } else var style = '<link rel="stylesheet" href="css/default.css">'; $('head link:last').after(style); } }
jquery読み込みで。
<script type="text/javascript"> $(function(){ document.ready=function() { setcss(); }; cssswitch(); }); </script>
HTML
<table> <tr> <td><button id="horizon">button</button></td> <td><button id="vertical">button</button></td> </tr> </table>
<div class="list-area"> <div class="list-left">画像など</div> <div class="list-right"> <p>タイトル</p> <p>項目1</p> <p>項目2</p> <p>項目3</p> </div> <br class="clear" /> </div> <div class="list-area"> <div class="list-left">画像など</div> <div class="list-right"> <p>タイトル</p> <p>項目1</p> <p>項目2</p> <p>項目3</p> </div> <br class="clear" /> </div>