5 月 « 2009 « ウェブデザイナー的ホームページ制作最適化

訪問者側でCSSを指定して、それによって、
次回以降のアクセスは指定したCSSが自動的に適用されるようにする。

たぶんYahoo!のトップページも同じ感じだと思います。

これらを選ぶと、次回から一度選んだCSSが適用されます。

▼javascriptソース（headタグ内）

<script type="javascript">
<!--
var cssfiles = new Array();
cssfiles[0] = "style0.css";
cssfiles[1] = "style1.css";
cssfiles[2] = "style2.css";
var css = GetCookie("CSS");
if(css == ""){css = cssflies[0];}
document.write('<link rel="styleseet" href="'+css+'" tyl="text/css">');

function CssfChange(sel){
if(sel.options[sel.selectedIndex].value){
SetCookie("CSS",cssfiles[sel.options[sel.selectedIndex].value]);
window.location.reload();
}
}

function GetCookie(key){
var tmp = document.cookie + ";
var index1 = tmp.indexOf(key,0);
if(index1 != -1){
tmp = tmp.substring(index1,tmp.length);
var index2 = tmp.indexOf("=",0)+1;
var index3 = tmp.indexOf(";"index2);
return(unescape(tmp.substring(index2,index3)))
}
return("");
}

function SetCookie(key,val){
document.cookie = key + "=" + escape(val) + ";expires = Fri, 31-DEC -2010 23:59:59 GMT;";
}
// -->
</script>
<noscript>
<link rel="stylesheet" href="style1.css" type="text/css">
</noscript>

▼HTMLソース

<form name="form">
<select name="file">
<option value="0">style0.css</option>
<option value="1">style1.css</option>
<option value="2">style2.css</option>
</select>
<input type="button" value="変更" onclick="CssfChange(document.form.file)">
</form>