クラス名(class属性の値)の存在を判定

クラス名(class属性の値)の存在を判定するには、element.classList.containsメソッドを使用します。

  • ※ IE9以下は対応していません。

構文

var result = element.classList.contains(setClassName);

引数

引数名 初期値 説明
第一引数
必須
setClassName string   存在を確認するクラス名

戻り値

存在していた場合はtrue、存在していない場合はfalseを返します。

JavaScript

var sampleElement = document.getElementById('sample'),
    result        = sampleElement.classList.contains('foo');

alert(result);

IE9以下に対応させる場合

IE9以下に対応させる場合は、次のようにすることで対応が可能です。

関数定義

JavaScript

/**
 * クラス名の存在を確認
 * @param {Element} element 確認する対象要素
 * @param {string|string[]} selector 存在を確認するクラス名
 * @param {boolean} [orFlag] スペース区切りをor判定にするかどうか
 * @return {boolean} 一致した場合はtrue、一致しなかった場合はfalseを返す
 */
var hasClass = function(element, selector, orFlag) {
	var hitCount = 0;

	if (!element || typeof element.className !== 'string') return;

	var strTrim = function(str) {
		return (str) ? str.replace(/^\s+|\s+$/g, '') : str;
	};

	var inArray = function(searchValue, arrayData) {
		var key, result = -1;

		if (!searchValue || !arrayData) return result;
		if (typeof searchValue !== 'string' || typeof arrayData !== 'object') return result;

		for (key in arrayData) {
			if (arrayData[key] === searchValue) {
				result = key;
				break;
			}
		}

		return result;
	};

	if (typeof selector === 'string') {
		selector = (selector.match(/^\./)) ? selector.replace(/^\./, '').split('.') : strTrim(selector).split(' ');
	}

	for (var i = 0, len = selector.length; i < len; i++) {
		if (inArray(selector[i], element.className.split(' ')) !== -1) {
			hitCount++;
		}
	}

	if (orFlag) {
		if (hitCount > 0) return true;
	} else {
		if (hitCount === len) return true;
	}

	return false;
};
							

使い方

var result = hasClass(element, selector[, or flag]);

引数

引数名 初期値 説明
第一引数
必須
element Element   判定する要素
第二引数
必須
selector string|string[]   判定するクラス名(セレクタ―)の文字列または配列
第三引数 or flag boolean false 第二引数で指定したクラス名(セレクタ―)の何れかが一致させたいための指定
設定可能値:
true = 有効
false = 無効

戻り値

一致した場合はtrue、一致しなかった場合はfalseを返します。

サンプルコード

HTML

<p id="sample" class="foo">sample</p>

JavaScript

var elem = document.getElementById('smaple');

// 通常(AND判定)
var result1 = hasClass(elem, 'foo');
var result2 = hasClass(elem, 'foo bar');
var result3 = hasClass(elem, '.foo.bar');
var result4 = hasClass(elem, ['foo', 'bar']);

// OR判定
var result5 = hasClass(elem, 'foo bar', true);
var result6 = hasClass(elem, '.foo.bar', true);
var result7 = hasClass(elem, ['foo', 'bar'], true);

alert('result1: ' + result1); // true
alert('result2: ' + result2); // false
alert('result3: ' + result3); // false
alert('result4: ' + result4); // false
alert('result5: ' + result5); // true
alert('result6: ' + result6); // true
alert('result7: ' + result7); // true

JavaScript逆引きリファレンス一覧へ戻る