クラス名（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