クラス名（class属性に値）を追加
クラス名（class属性に値）を追加するには、element.classList.addメソッドを使用します。
- ※ IE9以下は対応していません。
構文
element.classList.add( setClassName );引数
| 引数名 | 型 | 説明 | |
|---|---|---|---|
| 第一引数 必須 |
setClassName | string | 追加するクラス名 |
サンプルコード
JavaScript
var sampleElement = document.getElementById('sample');
sampleElement.classList.add('foo');IE9以下に対応させる場合
IE9以下に対応させる場合は、次のようにすることで対応が可能です。
関数定義
JavaScript
/**
* クラス名（class属性に値）を追加
* @param {Element|Node} element 対象の要素
* @param {string} classNameValue 付与するクラス名
* @return {Element|Node} 付与した要素を返す
*/
var addClassName = function(element, classNameValue) {
var classNames;
if (!element || typeof element.className === 'undefined' || typeof classNameValue !== 'string') return element;
if (element.classList) {
element.classList.add(classNameValue);
} else {
var inArray = function(searchValue, arrayData) {
var key, result = -1;
if ((searchValue || searchValue === 0) && arrayData) {
if ((typeof searchValue === 'string' || typeof searchValue === 'number') && typeof arrayData === 'object') {
for (key in arrayData) {
if (arrayData[key] === searchValue) {
result = key;
break;
}
}
}
}
return result;
};
classNames = element.className.replace(/^\s+|\s+$/g, '').split(' ');
if (classNames.toString() === '') classNames = [];
if (inArray(classNameValue, classNames) > -1) return element;
classNames.push(classNameValue);
element.className = classNames.join(' ');
}
return element;
};使い方
第一引数がエレメント、第二引数がclass名（値）です。
addClassName( element, classNameValue );引数
| 引数名 | 型 | 説明 |
|---|---|---|
| element 必須 |
node | クラス名を追加したい要素 |
| classNameValue 必須 |
string | 追加するクラス名 |
JavaScript
var sampleElement = document.getElementById('sample');
addClassName(sampleElement, 'foo');