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>