MENU

JS/jQueryでIEのバージョンを判定しクラスとして追加する

JSでIEのバージョンによって処理を分岐したいとき、どんな方法があるのか調べていると、ユーザーエージェントを使った方法が一般的のようでした。しかし、ユーザーエージェントは簡単に偽装できるので、信頼性に欠けます。そこで、今回は確実性の高い方法で判定する方法を紹介します。

クラスを追加


// バージョン
var version = '';

// DOM追加
$('body').append('
'
                +''
                +''
                +'
'
                +'
'
                +'');

// 判定
if ($('.ua-ie8').length > 0)
{
  version = 'ie8';
}
else if ($('.ua-ie9').length > 0)
{
  version = 'ie9';
}
else
{
  var ie10_11 = window.getComputedStyle($('.ua-ie10-11')[0], ':before').getPropertyValue('content');
  if (ie10_11 == '"ie10"')
  {
    version = 'ie10';
  }
  else if (ie10_11 == '"ie11"')
  {
    version = 'ie11';
  }
}

// html要素にクラス追加
$('html').addClass(version);

// 追加したDOMの削除
$('.ua-ie').remove();

IEのバージョンを調べるためにDOMを追加します。IE8/9の場合は条件分岐コメントを使いますが、IE10以上は条件分岐コメントによる判定ができないので、以前記事で紹介したCSSハックを使います。

IE6/7/8/9/10/11それぞれのバージョンのみに適用させるCSSハックまとめ

また、JSで疑似要素のCSSを取得を取得する方法も過去記事で紹介しています。

JS/jQueryでCSS疑似要素である:before:afterのプロパティを取得し変更する

今回、対象とするIEのバージョンは8〜11ですが、もしIE6/7にも対応させたい場合は、IE8/9のように条件分岐コメントを追加してください。

判定

<html class=”ie9″> のようにクラスが追加されるので、あとはクラスがあるかどうかで判定するだけです。


if ($('.ie8').length > 0)
{
  // IE8の場合
}

こんな感じで特定のバージョンのときのみの処理を実行できます。