JavaScript for CSS (9)

スタイルシートには代替スタイルシートという方法が用意されています。Netscape6はメニューで選択することができますが、IEでも同等の機能を実現することを考えます。

<LINK rel="alternate stylesheet" type="text/css" href="new2.css"
   title="代替スタイル" media="screen, print">
<LINK rel="stylesheet" type="text/css" href="new1.css"
   title="通常スタイル" media="screen, print">
<LINK rel="stylesheet" type="text/css"
   href="../index.css" media="all">
<LINK rel="stylesheet" type="text/css"
   href="js.css" media="all">
<SCRIPT type="text/javascript">
<!--
if(document.styleSheets){
 var sS=document.styleSheets;
 var LINKs= document.all ?
  document.all.tags("LINK") : document.getElementsByTagName("LINK");
}
//-->
</SCRIPT>

IE4以降やNetscape6では、StyleSheetオブジェクトのdisabledプロパティは、LINK rel="stylesheet"の場合はfalse、rel="alternate stylesheet"ならtrueになっています。※ MacIEは、4.5以降でないとrel="alternate stylesheet"のLINK要素をスタイルシートとして認識しません。

LINK要素としてアクセスすると、WinIEは何故かdisabledプロパティがfalseになってしまいます。LINK要素としては有効だけど、スタイルシートとしては無効といったような特殊な扱いなのかもしれません。

代替スタイルシート機能を模倣するには、以下のような関数を実行することになります。

<SCRIPT type="text/javascript">
<!--
function selectAlternate(){   // "代替スタイルシート"を選択
 if(!sS) return;

 for(var i=0; i<sS.length; i++)
  sS[i].title=="通常スタイル" ?
   sS[i].disabled=true : sS[i].disabled=false;
}

function selectNormal(){   // "通常スタイルシート"を選択
 for(var i=0; i<sS.length; i++)
  sS[i].title=="代替スタイル" ?
   sS[i].disabled=true : sS[i].disabled=false;
}

function none(){   // どちらも選択しない
 for(var i=0; i<sS.length; i++)
  sS[i].title ?
   sS[i].disabled=true : sS[i].disabled=false;
}
//-->
</SCRIPT>

これだけだと、他のページに移動すると無効になってしまうので、クッキーを利用して記憶させるとすると、最終的には以下のようになります。※ Netscape6ではきちんと動作しないようです。

上のボタンで選択すると、クッキーが有効ならブラウザを終了させるまでこのページだけ選択が記憶されます（WinIE4以降/MacIE5/Netscape6のみ）。

<SCRIPT type="text/javascript">
<!--
var sS=document.styleSheets;

if(sS && navigator.cookieEnabled){
 var c=document.cookie;

 if(c.indexOf("sheet=none")!=-1){ // どちらも選択しない
  for(var i=0; i<sS.length; i++)
   if(sS[i].title) sS[i].disabled=true;
 }
 else if(c.indexOf("sheet=alternate")!=-1){ // 代替スタイルシート
  for(i=0; i<sS.length; i++){
   if(sS[i].title=="通常スタイル") sS[i].disabled=true;
   else if(sS[i].title=="代替スタイル") sS[i].disabled=false;
  }
 }

 window.onunload=setCookie;
}

function setCookie(){
 for(var i=0,text; i<sS.length; i++){
  if(sS[i].title=="通常スタイル" && sS[i].disabled==false){
    text="normal";
    break;
  }
  else if(sS[i].title=="代替スタイル" && sS[i].disabled==false){
    text="alternate";
    break;
  }
 }
 if(!text) text="none";

 document.cookie="sheet="+text+"; domain=.portland.ne.jp";
}
//-->
</SCRIPT>
</HEAD>