この記事は最終更新日から2年以上が経過しており、情報が古くなっている可能性があります。

CSSを切り替えるボタンの作り方です。
例として、フォントサイズとテキストカラー、そしてバックグラウンドカラーを切り替えるリンクボタンを制作します。


まずはJavaScriptを用意します。あと、jquery.jsとjquery_cookie .jsも使用します。
CSSを配置する場所も忘れず記述して下さい。

function fontsize(cssname){
var cssurl= 'css/'+cssname+'.css';
$('#fontsize').attr({href:cssurl});
$.cookie('フォントサイズ初期CSS',cssurl,{expires:30,path:'/'});
}
function color(cssname){
var cssurl= 'css/'+cssname+'.css';
$('#color').attr({href:cssurl});
$.cookie('テキストカラー初期CSS',cssurl,{expires:30,path:'/'});
}
function background(cssname){
var cssurl= 'css/'+cssname+'.css';
$('#background').attr({href:cssurl});
$.cookie('バックグラウンドカラー初期CSS',cssurl,{expires:30,path:'/'});
}

次にHTMLを記述します。

<!--フォントサイズ-->
<a href="javascript:void(0);" onclick="fontsize('fontsize_large'); return false;">大</a>
<a href="javascript:void(0);" onclick="fontsize('fontsize_standard'); return false;">中</a>
<a href="javascript:void(0);" onclick="fontsize('fontsize_min'); return false;">小</a>
<!--テキストカラー-->
<a href="javascript:void(0);" onclick="color('textcolor_black'); return false;">黒</a>
<a href="javascript:void(0);" onclick="color('textcolor_white'); return false;">白</a>
<a href="javascript:void(0);" onclick="color('textcolor_yellow'); return false;">黄</a>
<a href="javascript:void(0);" onclick="color('textcolor_green'); return false;">緑</a>
<a href="javascript:void(0);" onclick="color('textcolor_orange'); return false;">橙</a>
<!--バックグラウンドカラー-->
<a href="javascript:void(0);" onclick="background('bgcolor_white'); return false;">白</a>
<a href="javascript:void(0);" onclick="background('bgcolor_blue'); return false;">青<a>
<a href="javascript:void(0);" onclick="background('bgcolor_black'); return false;">黒</a>

最後に各CSSを記述します。
これでたぶん動くんじゃないんですかね……。