Enjoy*Study

■[JavaScript][css]IEにおいてfilter:alpha(opacity)を設定しても、currentStyle.hasLayout=falseだとが透明にならない。

IEで不透明度を変更するために下記のようなコードを書いたのですが、対象のエレメントのスタイルによって、不透明度が変わらない場合があることに気がつきました。(IE6、7共に)

element.style.filter = 'alpha(opacity=50)';

だめだったのは、div要素に対して background-colorだけを指定したもので、これに対してwidthまたはheightを追加指定すると、ちゃんと不透明度が効いてきます。

なお、JavaScriptではなくcss上でfilterの指定を行っても同様でした。(width,heigthがないと効かない)

script.aculo.us(v1.7.0)ではどうしているんだろうと、ソース(effects.js)を眺めてみたところ、Element.setOpacityでは特に考慮しているような処理は見当たりませんでした。(その先のprotptype.jsでも)

が、Effect.Opacity の initialize をみると下記のような処理があり、どうもこれで上記の現象を回避しているようです。(ためしに同じスタイルの要素に対してEffect.Fadeを実行してみたところ、ちゃんとフェードアウトしました)

if(/MSIE/.test(navigator.userAgent) &&
  !window.opera && (!this.element.currentStyle.hasLayout))
  this.element.setStyle({zoom: 1});

currentStyle.hasLayout が false だと、filter: alpha(opacity=xx)は効かないようです。

で、currentStyle.hasLayoutがtrueになるのは、

MSDN hasLayout Propertyによると、下記のようになっており、script.aculo.usでは一番影響のないzoom:1を使って回避しているようです。

Permalink | コメント(1) | トラックバック(0)