jQueryのaddClass()をJavaScriptで実装するサンプルコード

2023-07-19

jQueryのaddClass()メソッドは、指定した要素にクラスを追加するための便利な関数です。これをJavaScriptで実装するには、以下のようなサンプルコードを使用できます。

function addClass(element, className) {
	if (element.classList) {
	// classListプロパティがサポートされている場合
	element.classList.add(className);
	} else {
	// classListプロパティがサポートされていない場合
	var classNames = element.className.split(' ');
	if (classNames.indexOf(className) === -1) {
		classNames.push(className);
		element.className = classNames.join(' ');
	}
	}
}

このaddClass()関数は、要素と追加するクラス名を引数として受け取ります。element.classListがサポートされている場合は、単純にclassList.add()メソッドを使用してクラスを追加します。classListがサポートされていない場合は、classNameプロパティを操作してクラスを追加します。

以下は、addClass()関数の使用例です。

// 要素を取得
var element = document.getElementById('myElement');

// クラスを追加
addClass(element, 'myClass');

上記の例では、myElementというIDを持つ要素にmyClassというクラスを追加しています。