代替スタイルシートに萌え～

[1 かとり～ぬ NG NG]

モヂラでしか見られないスタイルシート。
スクリプトでＩＥ対応させてるサイトが密かに急増中。
先ずはここから
http://www.cc-net.or.jp/~piro/

[433 Name_Not_Found 04/01/29 14:23 ID:???]

>>429で、動作確認しました。ＯＫです。今度こそ全て解決、かな。

function main(){/* メイン関数 */
sfTitles="";
sheet = fGetCookie('sheet');
fGetStyleTitles();
if(sfTitles.indexOf(sheet)==-1) sheet = sS.preferredTitle || 'Default';
fChangeSS(sheet);
window.onload=fInit;
window.onunload=fEnd;
}
function fGetStyleTitles(){/* スタイルシートの一覽を取得 */
sS=document.styleSheets;
for(i=0; i<sS.length; i++){
if (sS[i].title){
if (sfTitles.indexOf(sS[i].title)==-1) {
sfTitles+=sS[i].title;
sfTitles+=",";
}
var relS = sS[i].disabled ? 'alternateTitle' : 'preferredTitle';
if ( !sS[relS] ) sS[relS]= sS[i].title;
}
}
if (!sS.preferredTitle) sfTitles="Default,"+sfTitles; // 追加
sfTitles+="スタイル解除";
sfTitle=sfTitles.split(",");
}

[434 つづき 04/01/29 14:24 ID:???]

function fGetCookie(cName){/* クッキーを取得 */
var c=document.cookie, a, b;
if(c.indexOf(cName + '=')!=-1){
a=c.indexOf(cName + '=');
b=c.indexOf(';',a+cName.length+1);
if(b==-1) b=c.length;
return unescape(c.substring(a+cName.length+1,b));
}
return 'noCookie';
}

function fSetCookie(cName,cTitle){/* クッキーを設定 */
var eTitle=escape(cTitle), c;
var cexpires=new Date();
if (cTitle!='')
cexpires.setTime(cexpires.getTime() + 1000*60*60*24*cdays);
else
cexpires.setTime(cexpires.getTime() - 1000*60*60*24);
c = cName + '=' + eTitle + '; domain=' + cdomain + '; path=' + cpath
+ ((cdays!=0)?('; expires=' + cexpires.toGMTString()):';') ;
document.cookie=c;
}

function fChangeSS(ssTitle){/* スタイルシートの動的切替 */
if(!document.styleSheets) return;
sS=document.styleSheets;
for(i=0; i<sS.length; i++)
sS[i].disabled =
ssTitle=='スタイル解除' ? true :
ssTitle=='Default' ? (sS[i].title!=sS.preferredTitle && sS[i].title) : //追加
(sS[i].title!=ssTitle && sS[i].title);

[435 Name_Not_Found 04/01/29 14:26 ID:???]

>>433-434でFA？

[436 つづき 04/01/29 14:26 ID:???]

fSetCookie('sheet',ssTitle);
}

function fSelectSS(obj){/* 選択されたスタイルシートに切替 */
sheet=obj.value;
fChangeSS(sheet);
window.focus();
}

function fInit(){/* ページが読み込まれたときの処理 */
if (document.stylesheet) insertForm();
}

function insertForm(){/* 選択フォームを追加する */
fMakeHTML();
if(document.all) {
document.writeln('<form action="" class="selectsheet" style="direction:ltr;margin:0;background:#dfdfdf;" id="StyleChangeForm">\n'+nHTML+'</form>');
}
}

function fMakeHTML(){/* 選択フォームのHTMLを作成する */
nHTML='<ul>\n';
for(i=0; i<sfTitle.length; i++){
nHTML+='<li><input type="radio" id="id'+sfTitle[i]+'" name="Style" onclick="fSelectSS(this);" value="'+sfTitle[i];
nHTML+=(sfTitle[i]==sheet) ? '" CHECKED>' : '">';
nHTML+='<label for="id'+sfTitle[i]+'">'+sfTitle[i]+'</label></li>\n';
}
nHTML+='</ul>';
}

[437 つづき 04/01/29 14:27 ID:???]

function fEnd(){/* 終了処理 */
fReadSS();
if (NowSheet!=sheet) fSetCookie('sheet',NowSheet);
}
function fReadSS(){/* 現在適用されてゐるスタイルシートを読み込む */
// NowSheet="スタイル解除";
NowSheet="Default";
for(i=0; i<sS.length; i++) {
// if ((!sS[i].disabled)&&(sS[i].title)) NowSheet=sS[i].title;
if ((sS[i].disabled)&&(!sS[i].title)) { NowSheet='スタイル解除'; break; }
else if ((!sS[i].disabled)&&(sS[i].title)) { NowSheet=sS[i].title; break; }
}
}

[438 つづき 04/01/29 14:34 ID:???]

あと、.jsファイルの先頭に、これね↓。　以上WinIE用でした。

/* スタイルシート切替スクリプト */
/* http://critical.s6.xrea.com/web/cssselect.html */
/* http://minatsu.pos.to/mod_changess_v02.js */
/* http://pc2.2ch.net/test/read.cgi/hp/991400015/398-410 */
/* http://pc2.2ch.net/test/read.cgi/hp/991400015/419-429 */

if ( document.styleSheets
&& !(navigator.userAgent.indexOf("Mac_PowerPC") != -1 && navigator.userAgent.indexOf("MSIE 4") != -1)) {
/* Scriptでスタイルシートを扱えるブラウザのみ実行 */

/* 以下設定 */
cdomain=".pc2.2ch.net"; // サイトのドメイン名
cpath="/hp/"; // サイトのパス
cdays=10; // クッキーの有效日数 0=ブラウザ終了まで
/* 以上設定 */

main();
}

[439 終り 04/01/29 14:40 ID:???]

で、ＨＴＭＬのhead内に

<!-- スタイル選択メニュー（ＩＥ5.5以降のみ） -->
<!--[if gte IE 5.5000 ]>
<script TYPE="text/javascript" charset="Shift_JIS" src="../changess.js"></script>
<![endif]-->

としておいてから、

HTMLソースでスタイル選択フォームを挿入したい箇所に、これを。
<!--[if gte IE 5.5000 ]>
<script type="text/javascript">insertForm();</script>
<![endif]-->