slide

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>