JavaScriptでCSSのプロパティを削除する(IEのfilterでClearTypeが無効になるバグ対策)

javascriptからCSSを変更したい場合は、

//生
var node = document.getElementById('hoge');
node.style.marginLeft = '10px';

//dojo
dojo.style(dojo.byId('hoge'), 'marginLeft', '10px');

といった感じになります。

しかしこれだと、CSSのプロパティ自体を削除することはできません。

普段はそんな必要も無いのですが、IEにはfilterプロパティの付いた要素のその子要素でフォントのアンチエイリアス(ClearType)が効かなくなるというバグがあるので、filterプロパティ自体を削除したいことがあります。

node.styleで取得できるオブジェクトはCSSStyleDeclarationで、これにはremoveProperty()というメソッドがあるので、

node.style.removeProperty('filter');

とすれば良さそうです。

しかしIEではなぜかこれが未定義です。代わりにremoveAttributeが使えます。

なので、

var node = document.getElementById(’hoge’);
if (node.style.removeProperty) {
    node.style.removeProperty(’filter’);
}
if (node.style.removeAttribute) {
    node.style.removeAttribute(’filter’);
}

のような使い方になります。

具体的な使用例

dojoでは簡単にフェードインが使えます。

しかし、IEだと、フェードインした要素はフォントがガタガタになります。特にメイリオ等のアンチエイリアス前提フォントだと悲惨です。

以下のようにonEndを設定することで、フェードイン完了後はなめらかになります。

//fadeInを使うのであらかじめ透明度を0にする
dojo.style(dojo.byId(’hoge’), ‘opacity’, ‘0′);

(new dojo.fadeIn({
    node: ‘hoge’, //フェードインさせるノードのID
    duration: 1000, //ミリ秒
    onEnd: function() {
        var node = dojo.byId(’hoge’);
        if (node.style.removeProperty) {
            node.style.removeProperty(’filter’);
        }
        if (node.style.removeAttribute) {
            node.style.removeAttribute(’filter’);
        }
    }
})).play();

上がonEndを設定しない場合、下が設定した場合です。メイリオフォント使用。

090822_cleartype

Ruby on RailsによるWEBシステム開発、Android/iPhoneアプリ開発、電子書籍配信のことならお任せください この記事を書いた人と働こう! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

baba

ゆとりプログラマー。 高校時代から趣味でプログラミングを初め、そのままコードを書き続けて現在に至る。慶應義塾大学環境情報学部(SFC)卒業。BPS設立初期に在学中から参加している最古参メンバーの一人。Ruby on Rails、PHP、Androidアプリ、Windows/Macアプリ、超縦書の開発などを気まぐれにやる。軽度の資格マニアで、情報処理技術者試験(15区分 + 情報処理安全確保支援士試験)、技術士(情報工学部門)、CITP、Ruby Programmer Goldなどを保有。

babaの書いた記事

週刊Railsウォッチ

インフラ

BigBinary記事より

ActiveSupport探訪シリーズ