れぶろぐ

2008-01-11 (金)

話の要点としては、 csshover.htc を使うとクラス名がいつのまにか変わったりするので注意しましょう、ということ。といっても、これだけでは何のことやらさっぱり分からないと思うので、今回はまったことを具体的に書いておく。

<div id="treemenu">
	......
	<li class="collapsed"> ...... </li>
	......
</div>

のような HTML を書き、treemenu のところに onclick を設定していた。その後で、treemenu 内のどの要素がクリックされたのかを、

if (element.className == "collapsed") {
  ......
}

のように判別して処理していた。ところが、スタイルシートに次のような設定を追加した途端、IE で動かなくなってしまった。

li.collapsed:hover {
	background-color: #cdf;
}

クリックした時の element.className の値を調べてみると、

collapsed collapsedonhover

のように、元々の collapsed というクラスに加え、collapsedonhover というクラスがなぜか追加されている。ところが、IE 以外のブラウザで試してみると、普通に collapsed という値だけが返って来た。

ここに来てようやく、csshover.htc を組み込んでいるのが原因じゃないかと思い至ったので、試しに csshover.htc を外してみたところ、案の定動くようになった。しかし csshover.htc は組み込んでおきたいので、結局、クラス名を判定している箇所を、

if (element.className.indexOf("collapsed") == 0) {
  ......
}

のように、前方一致で比較するように書き換えることで対処した。

と、まぁ、csshover.htc は有用なのだけれど、結構こうやってだましだまし使わないといけない気がする。最近公開された IE7.js を使う方がいいのかなぁ？

Tags: JavaScript |

本日のリンク元