外部CSSの切り替え

◆解説

これは外部スタイルシートを切り替えるサンプルです

上のリンクをクリックすると該当のスタイルシートに切り替えます

このスクリプトは以下の通りです

■JavaScript

function replace_css(id,url){
  if(!document.getElementById) return false;
  var element = document.getElementById(id);
  if(!element || !element.cloneNode) return false;
  var new_node = element.cloneNode(true);
  new_node.href = url;
  element.parentNode.replaceChild(new_node,element);
  return true;
}

このスクリプトは以下の HTML要素があることを前提としています

■前提とする HTML要素
この文字はカスタマイズ項目です

<link id="ccss" rel="stylesheet" href="csschg1.css" type="text/css">

つまり、id属性を指定した link タグでスタイルシートが定義されていることが前提です

replace_css 関数は linkタグに付けた id名と、切り替えたいスタイルシートの URLを引数で指定します

具体的には、HTMLの記述を以下のようにします

■HTML要素(例)
この文字はカスタマイズ項目です

<head>
<link id="ccss" rel="stylesheet" href="csschg1.css" type="text/css">
</head>
   :
<a onclick="replace_css('ccss','csschg2.css');">別のスタイル</a>
   :

複数のスタイルシートが必要なら単に link タグを増やし、必要に応じて replace_css関数を呼び出します

◆注意とヒント

●このスクリプトは IE5.5, IE6, Mozilla1.4( 以上 Windows ), Safari1.0( 以上 Mac 10.2 ), Konqueror3.1( 以上 RedHat 9 ) で確認しています
これより古いバージョンのブラウザでは正常に動作しないかもしれません

●Opera(7.03, 7.20beta7) では replaceChild メソッドによる切り替え動作は有効ではないようです
Opera で動作するようにするには、 Operaであることをチェックして replaceChild の代わりに href 属性を直接変更するように修正します

●IE5.2(Mac 10.2)では linkタグの修正は反映されないようです

●NN4 はスタイルシートをある程度サポートしていますが link タグに id属性を指定すると、そのタグを無視するようです
もし、動作しなくても NN4 でこのタグを有効にしたい場合は、少し邪道ですが class属性で指定して getElementById の代わりに getElementsByTagName を使用して同じ class 属性を探索する手もあるかもしれません

外部 CSS を切り替える

◆解説

◆注意とヒント