IEでのalternate stylesheetによるスタイル変更の不具合
にあるstyleswitcher.jsというjavascriptを元にスタイルの変更を行わせていた。このstyleswitcher.jsではalternate stylesheetで指定したスタイルへの変更を行い、しかもcookieに保存してくれるので、次回表示(365日以内)や配下の別ページへの移動の際にどのalternate stylesheetを適用するのかを引き継いでくれるので便利だった。
ところが、その引継ぎを行う部分が、IEではうまく動かないことに気がついた。引継ぎのみでクリック動作でのsetActiveStyleSheet()はうまくいくのだが、引継ぎ時、つまり、htmlをロードして、cookieを読み込み、 setActiveStyleSheet() するときにのみうまくいかない。
このstyleswitcher.jsはalternate stylesheetを記述しているlink要素のCSS属性 disabled=false にすることでスタイルを「有効」にしているのだが、 IE Developer Toolbar などでみても disabled=true になっているようには見えなかった。
いろいろとコードをいじってみたところ、偶然うまくいったので記載しておく。要は、他のすべてスタイルを最初に disable=true に初期値をして設定し、あとで false にする必要があるようだ。
以下はサンプルなので細かい条件分岐はしていないが、 link の stylesheet 関連だけ(alternateも含む)を初期化するとよいだろう。
function setActiveStyleSheet(title) { var i, a, main; for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { a.disabled = true; // add for IE if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { a.disabled = true; if(a.getAttribute("title") == title) a.disabled = false; } else { // add for IE a.disabled = false; // add for IE } } }
IE6, IE7, IE8, Firefox3.5, GoogleChromeで動作を確認。
それにしても、なんででしょう?>IE