読者です 読者をやめる 読者になる 読者になる

IEでのalternate stylesheetによるスタイル変更の不具合

http://www.alistapart.com/articles/alternate/

にある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