IE10 で Flexible Box を JavaScript から使うときの注意点

  • 9
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

IE10, IE11, Chrome, Firefox で正しく動く例

CSS
.flex-box {
    flex: 1 1 1px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 1px;
}
JavaScript
$('.flex-box').css('flex'); // 取得
$('.flex-box').css('flex', '1 1 1px'); // 変更

IE10 だけ動かない例

IE11, Chrome, Firefox は正しく動きます。

JavaScript
// 取得
$('.flex-box').css('flex-grow');
$('.flex-box').css('flex-shrink');
$('.flex-box').css('flex-basis');

// 変更
$('.flex-box').css('flex-grow', 1);
$('.flex-box').css('flex-shrink', 1);
$('.flex-box').css('flex-basis', 1);

IE10 だけ JavaScript から flex-grow, flex-shrink, flex-basis プロパティの取得・変更ができないようです。

JavaScript
console.log(document.body.style);

上記のコードで有効なスタイルを列挙してみましたが確かに IE10 だけ flex-grow, flex-shrink, flex-basis がありませんでした。

対応策

JavaScript
// 取得
var grow = $('.flex-box').css('flex').split(' ')[0];
var shrink = $('.flex-box').css('flex').split(' ')[1];
var basis = $('.flex-box').css('flex').split(' ')[2];

// 変更
$('.flex-box').css('flex', grow + ''); // grow を変更
$('.flex-box').css('flex', basis); // basis を変更
$('.flex-box').css('flex', grow + ' ' + basis + 'px'); // grow と basis を変更
$('.flex-box').css('flex', grow + ' ' + shrink); // grow と shrink を変更
$('.flex-box').css('flex', grow + ' ' + shrink + ' ' + basis + 'px'); // すべて変更

これなら IE10, IE11, Chrome, Firefox で正しく動きます。

CSS プロパティが正しく動くのに JavaScript から同じプロパティが動かないなんて思わなくてだまされた。