LoginSignup
7

More than 5 years have passed since last update.

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

Posted at

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 から同じプロパティが動かないなんて思わなくてだまされた。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7