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

スタイルの内容を取得する際、display = 'none' の状態だと内容が取得できない

[programming]
スポンサーリンク

下記のようなスタイルがあったとして、

#hoge {
  width: 100px;
  position: fixed;
}

hogeに適用されているスタイル(例えばposition)を取得したい場合、hogeのスタイルに display = 'none' が設定されていると、Safariでは内容が取得出来ないようです。

var element = document.getElementById('hoge');
var css = document.defaultView.getComputedStyle(element, null);
alert(css.getPropertyValue('position')); // fixed

element.style.display = 'none';

alert(css.getPropertyValue('position')); // 取れない!!

FirefoxOperaでは普通に取れていたので、Safari(2.0.4)でコレが動かなくてかなりハマリました…
が、原因わかっても、display = 'none' をスタイル取得する際に一旦 display = '' にするってのは、バッドノウハウな感じがして嫌な気がします。
一瞬ならば、画面上に見えないからOKとかいうのはちょっと、、

もう少し調べてみようと思います。

                                • -

追記@2007/05/15
mootoolsで同じネタが。


追記@2007/05/20
trickstar_osさんから、コメントで「position: fixed;なら、.style.display = 'none'; の代わりに .style.visibility = 'hidden'; はどうでしょう?」と教わりました。
style.visibility = 'hidden' ならば、スタイルの内容を取得出来るので、style.display = 'none' の代わりに style.visibility = 'hidden' を使える(レイアウト的にOKな)場合には、style.visibility = 'hidden'で回避するのが良い手かと思います。